图片懒加载

<image src='{{item.img}}' class='banner' lazy-load="true" mode="aspectFill"/>

图片加了lazy-load 属性，就有主流lazyload的那种加载过程了

查看文档，image组件在 page 与 scroll-view 下，均会生效。为什么看起来像是没有生效？

lazy-load 实际实现的功能：小程序的lazy-load 不是通常认为的不在当前情况下展示的image标签不加载，

而是小程序提前加载当前屏幕和下一屏的图片，导致感知不到懒加载的存在。

也就是说该属性会提前加载下一屏的商品图片！但这样仍然要同一时间加载大量的图片

 

当然我们可以自己实现懒加载的方式加载图片

 

通过滚动监听每个图片高度值是否小于滚动条高度，从而改变数组里对应的isShow布尔值(如果该属性不存在也就是false,没有必要提前预加该属性，需要的时候再加)。

然后页面的image组件通过对src设置三目运算来判断是展示默认图片还是实际图片。

 

所谓的懒加载就是，当用户看见或需要加载的时候才加载图片，这有利缓解服务器的压力，同一时间发起大量图片请求会造成大量图片阻塞，显示空白，

 

即看到才加载图片，图片区 ，可见区，当列表上滑时，用户看到的就是可见区，

 

1. 首先要计算可见区的高度，获取手机屏幕高度

 let screenHeight = wx.getSystemInfoSync().windowHeight;   2.  获取图片所在位置，这时就要监听图片所在的位置了，这是小程序提供的页面滑动的监听       // 页面滑动监听 1.    onPageScroll: function (e) { 2. 3.    }   标记监听的节点 ：标记节点nav <view id='nav'> </view> id是唯一的   获取节点信息

1.    let query = wx.createSelectorQuery();

2.    query.select(`#nav`).boundingClientRect((rect) => {

3. 　　    console.log(rect.top）

4.    }).exec();

 

rect.top即节点头部到可见区顶部的距离

tips: 

　　rect.top 是指这个节点的头部到 可见区的顶部的距离;

　　rect.bottom 是指节点的尾部到可见区的顶部距离,

 

　　不是节点的头部到可见区底部的距离,

 

　　如果该节点不存在高度，这两个数值应该是一样的;

 

这时通过比较节点到可见区的距离就可以知道图片是否可见了,即 rect.top < screenHeight   1.   onPageScroll: function (e) {    2.    　　let query = wx.createSelectorQuery(); 3.    　　let index = e.currentTarget.dataset.index; 4.    　　query.select(`#nav`).boundingClientRect((rect) => { 5.            　　rect&&rect.top<screenHeight? ... //  设置图片可见 : ” “; 6.    　　}).exec(); 7.  　}   设置图片可见可以这样,根据索引设置列表图片设置可见 1.   his.setData({ 2.　　 ['list['+index+'].isShow']: true 3.    });   以上是要监听每一个图片，商品展示区大量的商品卡片，意味着要监听所有的图片，大量的监听会造成严重的卡顿现象，毫无体检 这时可以通过改进以上方法，实现只监听一个节点，这时就要轮流监听所有图片卡片的位置了，已加载图片的卡片不再监听   根据展示流，可以通过图片的索引进行轮流监听，即标记当前监听卡片的位置，当第一个图片加载成功后就往下监听第二个   标记监听索引 1.   <view wx:for='{{list}}'  wx:key='index' > 2.     　　<view id='id='scroll-item{{index}}''>  3.　　　　　　<image src="{{index<scrollIndex?items.img:''}}" mode='widthFix' lazy-load="true"></image> 4.　　　　</view> 3.   </view>   监听当前索引位置 1.   onPageScroll: function (e) {    2.    　　let query = wx.createSelectorQuery(); 3.    　　let index = this.data.scrollIndex;   // 全局标记索引 4.    　　query.select(`#scroll-item${index}`).boundingClientRect((rect) => { 5.            　　rect&&rect.top<screenHeight?this.setData({scrollIndex:index+1}) : ' ';   // 往下标记 6.    　　}).exec(); 7.  　}   scrollIndex 为当前监听索引的位置，商品列表的索引小于该标记的都是可显示的图片 <image src="{{index<scrollIndex?items.img:''}}" mode='widthFix' lazy-load="true"></image> 不在显示范围的不显示图片，当然你可以显示默认图片，我就得没有必要，将图片设置颜色背景即可   实验测试可知，这个方式还是可以的，到当手速向下快速滑动时，由于监听问题，不是每个滑动都可以监听得反馈，可能有些图片还来不及触发判断，造成没加载！ 不过这是监听造成的，没啥影响的！  

 

 

总结： 通过监听图片的位置判断是否在可见区，在就显示，不在就不加载

       通过标记索引位置，即该加载图片所在的卡片位置，不断往下标记位置，来实现一个监听

 

以上就是图片懒加载模式，当然只用lazy-load="true" 是可以的！

 

如有更好的方式，欢迎交流改进！