微信卡片流图片懒加载(监听所有图片)

图片懒加载

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 nav'>  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.   this.setData({

2.　　 ['list['+index+'].isShow']: true

3.    });

 

以上是要监听每一个图片，商品展示区大量的商品卡片，意味着要监听所有的图片，大量的监听会造成严重的卡顿现象，毫无体检

这时可以通过改进以上方法，实现只监听一个节点，这时就要轮流监听所有图片卡片的位置了，已加载图片的卡片不再监听

根据展示流，可以通过图片的索引进行轮流监听，即标记当前监听卡片的位置，当第一个图片加载成功后就往下监听第二个

 

标记监听索引

1.   

2.     　　scroll-item{ {index}}''> 

3.　　　　　　index}}" mode='widthFix' lazy-load="true">

4.　　　　

3.   

 

监听当前索引位置

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 为当前监听索引的位置，商品列表的索引小于该标记的都是可显示的图片

{ {index" mode='widthFix' lazy-load="true">

不在显示范围的不显示图片，当然你可以显示默认图片，我就得没有必要，将图片设置颜色背景即可

实验测试可知，这个方式还是可以的，到当手速向下快速滑动时，由于监听问题，不是每个滑动都可以监听得反馈，可能有些图片还来不及触发判断，造成没加载！

不过这是监听造成的，没啥影响的！

 

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

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

 

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

 

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