懒加载方法总结

beita 发布于2019-08-02 15:28 / 2547人阅读

摘要：一传统的懒加载有时一个页面中有多个图片或视频要展示如果全部将资源加载显示会导致页面暂时空白用户体验很不好要改变这种体验的一种思路是先用一个占位图片显示然后在可视窗口展示的内容提前加载保证用户看到的是已经加载好的图片等其他占用空间较大的资源例

一.传统的懒加载

有时一个页面中有多个图片或视频要展示,如果全部将资源加载显示,会导致页面暂时空白,用户体验很不好,要改变这种体验的一种思路是先用一个占位图片显示,然后在可视窗口展示的内容提前加载,保证用户看到的是已经加载好的图片等其他占用空间较大的资源.
例如:

//css代码:
div image[alt^="picture"] {
    width: 100px;
    height: 100px;
    background: silver;
  }

.img {
   height: 200px;
   width: 400px;
  }
//html代码

  
  
  
  
  
  

//js代码
var imgArr = document.getElementsByClassName("img");
  var imgHeight = imgArr[0].style.height;
  var clientHeight = document.documentElement.clientHeight;//获取网页可见区域高度
  window.onscroll = function() {
    var scrollTop = document.documentElement.scrollTop;//网页垂直方向滚动的高度
    for (let i = 0; i < imgArr.length; i++) {
      var offset = imgArr[i].offsetTop;//获取当前对象到其上级层顶部的距离
      var topT = scrollTop - ("200" + offset);
      var topB = scrollTop + clientHeight - offset;
      if (topT < 0 && topB > 0) {
        imgArr[i].src = imgArr[i].getAttribute("data-src");
      } else {
        imgArr[i].src = "./time.gif";
      }
    }
  }

页面刚开始如下图所示,

当滚动鼠标时,图片陆续显示

二.微信小程序中的懒加载

微信小程序是监听目标节点和参照区域相交的状态来实现懒加载

//wxml代码:

    懒加载示例
    
        
        
         {{item.title}}
    

//js代码:
Page({
  data: {
    imgArr: [{
        title: "picture1",
        src: "../../images/timg.gif",
        realSrc: "../../images/1.jpg"
      },
      {
        title: "picture2",
        src: "../../images/timg.gif",
        realSrc: "../../images/2.jpg"
      },
      {
        title: "picture3",
        src: "../../images/timg.gif",
        realSrc: "../../images/3.jpg"
      }, {
        title: "picture4",
        src: "../../images/timg.gif",
        realSrc: "../../images/4.jpg"
      }
    ]
  },
  onLoad(options) {
    var _self = this;
    var obs = wx.createIntersectionObserver(this, { observeAll: true });
    obs.relativeToViewport({ bottom: 100 }).observe(".img", function(res) {
      _self.data.imgArr.forEach(function(item) {
        if (res.dataset.src == item.realSrc) {
          if (res.intersectionRatio > 0) {
            item.src = res.dataset.src;
          } else {
            item.src = "../../images/timg.gif";
          }
          _self.setData({ imgArr: _self.data.imgArr });
        }
      })
    })
  },
})

如图所示:

GPU云服务器云服务器懒加载懒加载异常 javascript懒加载懒加载session

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54144.html

懒加载方法总结

摘要：一传统的懒加载有时一个页面中有多个图片或视频要展示如果全部将资源加载显示会导致页面暂时空白用户体验很不好要改变这种体验的一种思路是先用一个占位图片显示然后在可视窗口展示的内容提前加载保证用户看到的是已经加载好的图片等其他占用空间较大的资源例一.传统的懒加载有时一个页面中有多个图片或视频要展示,如果全部将资源加载显示,会导致页面暂时空白,用户体验很不好,要改变这种体验的一种思路是先用...

seal_de 2019-08-23 18:26 评论0 收藏0
使用Webpack的代码分离实现Vue懒加载（译文）

摘要：当一个的项目体积变得十分庞大的时候，使用的代码分离功能将，或的代码进行分离并按需加载，会极大的提高的首屏加载速度。如果我们使用函数在中返回模块作为载荷，就实现了懒加载。当一个Vue的项目体积变得十分庞大的时候，使用Webpack的代码分离功能将Vue Components，routes或Vuex的代码进行分离并按需加载，会极大的提高App的首屏加载速度。 showImg(https:...

SmallBoyO 2019-08-23 10:42 评论0 收藏0
Laravel Eloquent中的懒加载VS即时加载

摘要：在本文中，我们将了解中的懒加载和即时加载以及它如何在后台运行。现在所有的房屋数据和在关系表中的数据都同时加载出来了，查询的语句的是使用即时加载时仅执行个查询。总结现在你理解了这个过程，希望它能帮助你理解懒加载和即时加载的用法和基本原理。 Laravel中的Eloquent(ORM)的工作方式很令人惊讶，并提供访问数据库的非常简单的方法。在本文中，我们将了解Laravel Eloquen...

Keven 2019-07-01 12:27 评论0 收藏0