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

前言

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

实现思路

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

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

官方解释

WXML节点布局相交状态

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

代码实现