效果图

，既然来了，我就把妹妹给你。

定义

懒加载是前端人士熟知的一种性能优化方法。简单来说，只有当图片出现在浏览器的可见区域，图片的路径才能设置为显示。这是偷懒加载图片。

实现原理

监控页面的滚动事件，判断页面中元素的顶值是否小于等于页面的可见高度。

判断逻辑代码如下

element.getBoundingClientRect()。top=document . document element . client height？显示：默认值

我们知道小程序页面的脚本逻辑运行在JsCore中，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也不能在脚本中操作组件。

因此，有必要对图片偷懒加载的数据大惊小怪。

在

页面

页，只需要根据数据的某个字段判断是否显示图片。该字段为布尔类型，只有在默认图片为假时才需要显示。

代码是这样的。

view%20%20wx%20%20:%20for='%20{%20{%20list%20%20}%20}%20'%20class='%20item%20%20item-{%20{%20index%20%20}%20}%20'%20wx%20%20:%20key='%20{%20{%20index%20%20}%20}%20'%20image%20%20class='%20{%20{%20item%20%20.%20show%20%20'%20'active%20%20'%20:%20'%20'%20}%20}%20'%20src='%20{%20{%20item%20%20.%20show？item%20%20.%20src%20%20:%20item%20%20.%20def%20%20}%20}%20'/image/view布局简单，视图组件中有一张图片，列表是循环的，显示多少就显示多少。

组件图像的src字段由每个项目的显示绑定，活动的是透明的过渡。

样式

图像{%20transition:%20all%20%20.3s%20%20easeopa%20%20city%20%203360%200；}.active%20%20{%20opa%20%20city%20%203360%201；}%20

逻辑

标准主要解释了偷懒加载，所以数据被写死在页面上。

数据结构如下：

我们使用两种方法来实现延迟加载。你准备好了吗？让我们一起玩得开心。

WXML节点信息

小程序支持调用createSelectQuery创建SelectorQuery的实例，使用select方法选择节点，通过BoundingClient获取节点信息。

Wx.createselector查询()。选择('。项目')。bounding client((ret)={ console . log(ret)})。exec()显示以下结果

之图片懒加载【完美方案，你不来看看】(图4)" data-bd-imgshare-binded="1" src="http://www.yiyongtong.com/uploads/allimg/180509/152044NH-2.jpg" />

悄悄告诉你，小程序里面有个onPageScroll函数，是用来监听页面的滚动的。 还有个getSystemInfo函数，可以获取获取系统信息，里面包含屏幕的高度。

接下来，思路就透彻了吧。还是上面的逻辑， 扒拉扒拉直接写代码就行了,这里只写下主要的逻辑，完整代码请戳文末github

showImg(){let group = this.data.grouplet height = this.data.height  // 页面的可视高度wx.createSelectorQuery().selectAll('.item').boundingClientRect((ret) => { ret.forEach((item, index) => {   if (item.top <= height) { 判断是否在显示范围内     group[index].show = true // 根据下标改变状态   } }) this.setData({   group })}).exec()}onPageScroll(){ // 滚动事件this.showImg()}

至此，我们完成了一个小程序版的图片懒加载，只是思维转变了下，其实并没有改变实现方式。我们来学些新的东西吧。

节点布局相交状态

节点相交状态是啥？它是一个新的API，叫做IntersectionObserver, 本文只讲解简单的使用，了解更多请猛戳没错，就是点我

小程序里面给它的定义是节点布局交叉状态API可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

里面设计的概念主要有五个，分别为

• 参照节点：以某参照节点的布局区域作为参照区域，参照节点可以有多个，多个话参照区域取它们的布局区域的交集
• 目标节点：监听的目标，只能是一个节点
• 相交区域：目标节点与参照节点的相交区域
• 相交比例：目标节点与参照节点的相交比例
• 阈值：可以有多个，默认为[0], 可以理解为交叉比例，例如[0.2, 0.5]

关于它的API有五个，依次如下

1、createIntersectionObserver([this], [options])，见名知意,创建一个IntersectionObserver实例

2、intersectionObserver.relativeTo(selector, [margins]), 指定节点作为参照区域，margins参数可以放大缩小参照区域，可以包含top、left、bottom、right四项

3、intersectionObserver.relativeToViewport([margin])，指定页面显示区域为参照区域

4、intersectionObserver.observer(targetSelector, callback)，参数为指定监听的节点和一个回调函数，目标元素的相交状态发生变化时就会触发此函数，callback函数包含一个result，下面再讲

5、intersectionObserver.disconnect()停止监听，回调函数不会再触发

然后说下callback函数中的result，它包含的字段为

我们主要使用intersectionRatio进行判断，当它大于0时说明是相交的也就是可见的。

先来波测试题，请说出下面的函数做了什么，并且log函数会执行几次

1、wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => { console.log('监听box组件触发的函数')    }) 2、wx.createIntersectionObserver().relativeTo('.box').observer('.item', (result) => { console.log('监听item组件触发的函数') })3、wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => {if(result.intersectionRatio > 0){console.log('.box组件是可见的') }})

duang，揭晓答案。

第一个以当前页面的视窗监听了.box组件，log会触发两次，一次是进入页面一次是离开页面

第二个以.box节点的布局区域监听了.item组件，log会触发两次，一次是进入页面一次是离开页面

第三个以当前页面的视窗监听了.box组件，log只会在节点可见的时候触发

好了，题也做了，API你也掌握了，相信你已经可以使用IntersectionObserver来实现图片懒加载了吧，主要逻辑如下

let group = this.data.group // 获取图片数组数据for (let i in this.data.group){   wx.createIntersectionObserver().relativeToViewport().observe('.item-'+ i, (ret) => {   if (ret.intersectionRatio > 0){     group[i].show = true    }   this.setData({     group   }) })}

最后

至此，我们使用两种方式实现了小程序版本的图片懒加载，可以发现，使用IntersectionObserver来实现不要太酸爽。