【转载】如何在小程序实现图片lazy-load懒加载效果

文章出处：https://www.cnblogs.com/zishang91/p/8507485.html

在vue里就有vue-lazyload插件，直接一条代码完事了，而这里只能自己写了，好了说正事儿，先看效果：

        思路是这样的：图片列表展示数据是一个数组，在后台请求回来数据时我们定义一个和图片列表数组长度一样的数组arr，里面的元素都是布尔值false；再定义一个数组arrHeight用于存放每个图片相对于顶部的高度值。通过滚动监听每个图片高度值是否小于滚动条高度，从而改变数值arr里对应的布尔值。然后页面的image组件通过对src设置三目运算来判断是展示默认图片还是实际图片。

        里面涉及到的api我就不详说了，可以去小程序开发文档查具体用法。以下是具体代码：

 

 

js代码：

 

 

 

 

        注：第28行的延时实际上是等待image组件加载图片然后初始化获取单个图片高度，image组件有一个bindload属性，但是这个属性是有一个图片加载就会执行一次，在这里做获取就会获取N次，不利于性能优化; 

            第50行的i/2是因为每行有两张图片，这两张的高度是一样的，所以Math.floor(i / 2)，加10是我上下图片之间的margin值;

            第57行如果不加上  app.globalData.windowHeight 那效果就是一滚动加载的不是底部的两张图片而是顶部的两张图片，大家可以试一下效果;

            

在此图片懒加载效果已实现，这里并不是滚动到了某张图片的位置然后向后台请求图片数据再加载出来，其实本质上图片早就已经全部加载了，只是通过滚动到位置再显示，达到懒加载的效果，希望能对你们有所帮助。