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

The content of this article is about what is lazy loading? The two implementation methods of lazy loading of images in mini programs have certain reference value. Friends in need can refer to them. I hope it will be helpful to you.

Definition

Lazy loading is a performance optimization method known to front-end people. Simply put, the image correctness is set only when the image appears in the visible area of ​​the browser. Real path, let the picture show up. This is lazy loading of images.

Implementation principle

Listen to the scroll event of the page and determine whether the distance between the element and the top of the page is less than or equal to the visual height of the page

The judgment logic code is as follows

element.getBoundingClientRect().top

We know that the script logic of the mini program page is run in JsCore. JsCore is an environment without window objects. Therefore, you cannot use window in a script, and you cannot operate components in a script.

So regarding lazy loading of images, we need to make a fuss about the data.

Page

On the page, you only need to judge whether to display the picture based on a certain field of the data. The field is of Boolean type. When it is false, the default picture will be displayed.

The code probably looks like this

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

The layout is very simple, there is a picture in the view component, and it loops list, and displays as many as there are

imageThe src field of the component is bound through the show of each item, and active is added A transparent transition

Style

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

Logic

This article mainly explains lazy loading, so the data is written on the page

The data structure is as follows:

We use two methods to implement lazy loading. Are you ready? Come and have fun coding together.

WXML node information

The applet supports calling createSelectQuery to create a SelectorQuery instance, use the select method to select nodes, and obtain node information through boundingClientRect.

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

The displayed results are as follows

I’ll tell you quietly that there is an onPageScroll function in the mini program, which is used to monitor the scrolling of the page.
There is also a getSystemInfo function that can obtain system information, which includes the height of the screen.

Next, the idea will be clear. It’s still the above logic. Just write the code directly. Here I only write down the main logic

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>

字段名	类型	说明
intersectionRatio	Number	相交比例
intersectionRect	Object	相交区域的边界，包含 left 、 right 、 top 、 bottom 四项
boundingClientRect	Object	目标节点布局区域的边界，包含 left 、 right 、 top 、 bottom 四项
relativeRect	Object	参照区域的边界，包含 left 、 right 、 top 、 bottom 四项
time	Number	相交检测时的时间戳

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

相关推荐：

Javascript实现图片懒加载插件的方法

用Js实现懒加载和跨域的实现步骤

The above is the detailed content of What is lazy loading? Two implementation methods of lazy loading of images in mini programs. For more information, please follow other related articles on the PHP Chinese website!