Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to realize lazy loading of WeChat Mini Programs pictures". In daily operation, I believe that many people have doubts about how to realize lazy loading of WeChat Mini Programs pictures. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "WeChat Mini Programs picture lazy loading". Next, please follow the editor to study!

Define

Lazy loading is a way of performance optimization that everyone in the front end knows. To put it simply, only when the picture appears in the visual area of the browser, the real path of the picture is set so that the picture can be displayed. This is the picture lazily loaded.

Realization principle

Listen to the scroll event of the page to determine whether the distance between the element and the top value 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 {console.log (ret)}) .exec ()

To tell you quietly, there is an onPageScroll function in Mini Program, which is used to monitor the scrolling of the page. There is also a getSystemInfo function that can get the system information, including the height of the screen.

Next, the train of thought is clear. Or the logic above, just write the code directly. Only the main logic is written here. Please stamp the github at the end of the text for the complete code.

ShowImg () {let group = this.data.group let height = this.data.height / / the visual height of the page wx.createSelectorQuery (). SelectAll ('.item'). BoundingClientRect ((ret) = > {ret.forEach ((item, index) = > {if (item.top {console.log ('listening for functions triggered by box components')}) 2, wx.createIntersectionObserver () .relativeTo ('.box'). Observer ('.item') (result) = > {console.log ('listening for functions triggered by item components') 3, wx.createIntersectionObserver () .relativeToViewport () .observer ('.box', (result) = > {if (result.intersectionRatio > 0) {console.log ('.box components are visible')})

Duang, reveal the answer.

The first listens to the .box component in the window of the current page, and log triggers twice, once entering the page and once leaving the page

The second listens on the .item component in the layout area of the .box node, and the log triggers twice, once entering the page and once leaving the page.

The third listens to the .box component in the window of the current page, and log is triggered only when the node is visible.

All right, the problem has been done, and you have mastered API. I believe you can use IntersectionObserver to load pictures lazily. The main logic is as follows.

Let group = this.data.group / / get picture array data 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})})}

So far, we have implemented the lazy loading of Mini Program images in two ways, and we can find that the implementation using IntersectionObserver is not too sour.

At this point, the study on "how to achieve lazy loading of WeChat Mini Programs pictures" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.