meaning

Lazy loading, or lazy loading, is used for places that are not on the first screen or cannot be seen by users. Lazy loading speeds up the first screen loading, saves traffic, and improves user experience

implementation

The traditional lazy loading mode of H5 is realized by listening to the scroll event of the page and judging by the height of the viewport. Small programs are similar, by listening to the page onPageScroll event to get the current scrolling data, combined with getSystemInfo to get device information to determine. Due to the intensive occurrence of Scroll events and a large amount of computation, it often causes problems such as reduced FPS and page lag. This is done in a different way

createIntersectionObserver

Small program foundation library 1.9.3 start support, understand the next

The node layout crossover state API can be used to listen for the intersection state of two or more component nodes at the layout location. This set of apis can often be used to infer whether and to what extent certain nodes are visible to the user.

There are five concepts involved in the API

  • Reference node: The reference node to listen on, taking its layout area as the reference area. If there are multiple reference nodes, the intersection of their layout regions is taken as the reference region. The page display area can also be used as a reference area.
  • Target node: The target to listen on, which can only be one node by default (with the selectAll option, multiple nodes can be listened on at the same time).
  • Intersection area: the intersection area of the layout area of the target node and the reference area.
  • Intersection ratio: the proportion of the intersection area to the reference area.
  • Threshold: If the intersection ratio reaches a threshold, the listener’s callback function is triggered. There can be multiple thresholds.

Through the understanding of the above API and concept, you can obtain whether the picture can be seen by the user or will be seen, through the callback to load the picture to display, and then listen to the next group of pictures to be displayed, so you can achieve lazy loading of the picture, the code is shown below

//index.js // get the application instance const app = getApp()let lazyload;

Page({
	data: {
        classNote: 'item-'Img: [] // list of images}, onReady:functionSetData ({count: 5}) {// Start listening on the node. Note that onReady is used to listen on the node. }, viewPort:function() { const that = this; var intersectionObserver = wx.createIntersectionObserver(); // The bottom: 100 function is triggered when the display area is 100px below. intersectionObserver.relativeToViewport({bottom: 100}).observe(this.data.classNote + this.data.count, (res) => {if(res.boundingClientRect.top > 0){ intersectionObserver.disconnect() that.setData({ count: that.data.count + 5 }) that.viewPort(); }})}})Copy the code
//page.wxml

<view>
    <view wx:for="{{img}}" class="item-{{index}}">
        <image style="display: {{index < count ? 'block' : 'none'}}" src="{{item}}"></image>
    </view>
</view>
Copy the code

There are two things to note here

  1. The listening node needs to render first, which means the listening action needs to be performed inonReadywhen
  2. The example listener is loop node dependentclassAt least one node needs to be rendered before listening
  3. After listening on one loop node each time, stop listening and continue listening on the next node

The results of

Image too big to upload, poke here for preview

No matter how fast you scroll, the FPS stays at 60

conclusion

H5 actually has a similar API, the use of small programs with H5 is also very similar, there are a lot of things can refer to. For the above way of listening, I simply encapsulated a library to call, welcome star.