界说

懒加载，，，，，，前端人都知道的一种性能优化方式，，，，，，简朴的来说，，，，，，只有当图片泛起在浏览器的可视区域内时，，，，，，才设置图片正真的路径，，，，，，让图片显示出来。。。这就是图片懒加载。。。

实现原理

监听页面的scroll事务,判读元素距离页面的top值是否是小于即是页面的可视高度

判断逻辑代码如下

element.getBoundingClientRect().top <= document.documentElement.clientHeight ? 显示 : 默认

我们知道小程序页面的剧本逻辑是在JsCore中运行，，，，，，JsCore是一个没有窗口工具的情形，，，，，，以是不可在剧本中使用window，，，，，，也无法在剧本中操作组件。。。

以是关于图片懒加载就需要在数据上面做文章了。。。

我们使用两种方式来实现懒加载，，，，，，准备好没有，，，，，，一起来快乐的撸码吧。。。

WXML节点信息

小程序支持挪用createSelectQuery建设一个SelectorQuery实例，，，，，，并使用select要领来选择节点，，，，，，并通过boundingClientRect来获取节点信息。。。

wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{
    console.log(ret)
}).exec()
 

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

接下来，，，，，，思绪就透彻了吧。。；；；Ｕ站缮厦娴穆呒，，，，，， 扒拉扒拉直接写代码就行了,这里只写下主要的逻辑，，，，，，完整代码请戳文末github

showImg(){
    let group = this.data.group
    let 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() 阻止监听，，，，，，回调函数不会再触发

我们主要使用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来实现不要太酸爽。。。