What is lazy loading? Two implementation methods of lazy loading of images in mini programs

<view>
    <image></image>
</view>

image{
    transition: all .3s ease;
    opacity: 0;
}
.active{
    opacity: 1;
}

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

showImg(){
    let group = this.data.group
    let height = this.data.height  // 页面的可视高度
    
    wx.createSelectorQuery().selectAll('.item').boundingClientRect((ret) => {
     ret.forEach((item, index) => {
       if (item.top <p> At this point, we have completed a small program version of lazy loading of images. It’s just a change of thinking. In fact, there is no Change the way it is implemented. Let's learn something new. </p><h3>Node layout intersection status</h3><p>What is the node intersection status? It is a new API called IntersectionObserver. This article only explains the simple use. To learn more, please click on it. Just click me. </p><p>The definition given in the applet is that the node layout intersection status API can be used Monitor the intersection status of two or more component nodes at layout positions. This set of APIs can often be used to infer whether certain nodes can be seen by users and what proportion can be seen by users. </p><p>There are five main concepts in the design, which are </p><p>Reference node: The layout area of ​​a certain reference node is used as the reference area. There can be multiple reference nodes. If there are multiple reference areas, the reference area is selected. The intersection of their layout areas</p><p>Target node: The listening target can only be one node</p><p>Intersection area: The intersection area between the target node and the reference node</p><p>Intersection ratio: The intersection ratio between the target node and the reference node</p><p>Threshold: There can be multiple, the default is [0], which can be understood as the intersection ratio, such as [0.2, 0.5]</p><p>There are APIs about it Five, as follows</p><p>1. createIntersectionObserver([this], [options]). See the name and create an IntersectionObserver instance</p><p>2.intersectionObserver.relativeTo(selector, [margins] ), specify the node as the reference area, the margins parameter can zoom in and out the reference area, and can include top, left, bottom, and right. </p><p>3, intersectionObserver.relativeToViewport([margin]), specify the page display area as the reference Area </p><p>4, intersectionObserver.observer(targetSelector, callback), the parameters are the specified monitoring node and a callback function. This function will be triggered when the intersection state of the target element changes. The callback function contains a result, as follows Let’s talk about it again</p><p>5. intersectionObserver.disconnect() stops monitoring, the callback function will no longer be triggered</p><p>Then let’s talk about the result in the callback function, the fields it contains are</p>

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组件是可见的') 
    }
})

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
       })
     })
}