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

        自从跳一跳出现以后小程序又开始频繁出现了，在学习过程当中发现小程序虽然好可是因为api不完善致使开发过程当中有不少的坑，重点是网上相对小程序出现坑时解决方案显然比较少，小程序最让人以为痛心疾首之一就是没法引入插件，不少插件功能都只能本身写，这就使人尴尬了。好比图片懒加载，在vue里就有vue-lazyload插件，直接一条代码完事了，而这里只能本身写了，好了说正事儿，先看效果：

                                             

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

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

 

html代码：

js代码：

  

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

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

            第57行 若是不加上  app.globalData.windowHeight 那效果就是一滚动加载的不是底部的两张图片而是顶部的两张图片，你们能够试一下效果;

            

在此图片懒加载效果已实现，这里并非滚动到了某张图片的位置而后向后台请求图片数据再加载出来，其实本质上图片早就已经所有加载了，只是经过滚动到位置再显示，达到懒加载的效果，但愿能对大家有所帮助。

 

 

 

        如需转载请注明出处： http://www.cnblogs.com/zishang91/p/8507485.html，以便有错误能够及时修改，如有错漏不足之处，请见谅而且指点，谢谢！！！