微信小程序--实现图片懒加载（lazyload）

前言

在微信小程序中，实现图片懒加载的方式有不少

实现思路

• image标签里的lazy-load属性
• 经过监听滚动条滑动事件，判断元素距离页面顶部的距离是否小于等于页面的可视高度
• Intersection Observer API

鉴于第一种方式目前看不出效果，第二种方式代码量仍是有点大的，咱们在这里用第三种方式来实现图片懒加载。

官方解释

WXML节点布局相交状态

• 节点布局交叉状态API可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API经常能够用于推断某些节点是否能够被用户看见、有多大比例能够被用户看见。
• 涉及到如下几个概念
  • 参照节点：监听的参照节点，取它的布局区域做为参照区域。若是有多个参照节点，则会取它们布局区域的 交集 做为参照区域。页面显示区域也可做为参照区域之一。
  • 目标节点：监听的目标，默认只能是一个节点（使用 selectAll 选项时，能够同时监听多个节点）。
  • 相交区域：目标节点的布局区域与参照区域的相交区域。
  • 相交比例：相交区域占参照区域的比例。
  • 阈值：相交比例若是达到阈值，则会触发监听器的回调函数。阈值能够有多个。

代码实现

1. wxml文件

<scroll-view>
		<view class="image-panel item item-{{index}}" wx:for="{{list}}" wx:for-item="item" wx:key="{{index}}">
			<view class="video-play" bindtap="linkToDetail">
				<image class="{{item.show ? 'active': ''}}" src="{{item.show ? item.cover : default}}" mode="widthFix" lazy-load />
			</view>
		</view>
	</scroll-view>
复制代码

注意

1. 这里用到了第一种方式，也就是在image标签里加上了lazy-load属性，要配合scroll-view使用才有效果。惋惜，在本地没有测出效果。
2. 经过show这个字段来判断是否显示原图，未加载的状况下使用默认图来展现。

2. js文件

const url = "";//业务api地址
    const that = this;
    const obj = {
        method: 'get',
        url: url,
        success: function (res) {
            var items = res.data.items;
            that.setData({
                list: items
            })
            setTimeout(() => {
                for (let i in res.data.items) {
                    wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe('.item-' + i, (res) => {
                        if (res.intersectionRatio > 0) {
                            items[i].show = true
                        }
                        that.setData({
                            list: items
                        })
                    })
                }
            }, 1*1000);
        }
    }
    common.httpRequest(obj)
复制代码

注意

1. 监听的节点须要先渲染,因此须要初始化列表，并用默认图占位。
2. 延迟执行createIntersectionObserver()方法

总结

1. 初始化列表是否能够初始化部分图片，或者首屏图片。
2. 监听须要依赖节点的className，须要等前一个节点循环完成，才能监听下一个，目前是用延迟来处理的，可能还有更好的方案？

参考文档

微信小程序官方文档