[[238685]]

意義

懶加載或者可以說是延遲加載，針對非首屏或者用戶"看不到"的地方延遲加載，有利于頁面首屏加載速度快、節(jié)約了流量,用戶體驗好。

實現(xiàn)方式

傳統(tǒng)H5的懶加載方式都是通過監(jiān)聽頁面的scroll事件來實現(xiàn)的，結(jié)合viewport的高度來判斷。

小程序也類似，通過監(jiān)聽頁面onPageScroll事件獲取當(dāng)前滾動的數(shù)據(jù)，結(jié)合getSystemInfo獲取設(shè)備信息來判斷。由于scroll事件密集發(fā)生，計算量很大，經(jīng)常會造成FPS降低、頁面卡頓等問題。

這里說的是通過另外一種方式來實現(xiàn)

createIntersectionObserver

小程序基礎(chǔ)庫 1.9.3 開始支持，了解下

    節(jié)點布局交叉狀態(tài)API可用于監(jiān)聽兩個或多個組件節(jié)點在布局位置上的相交狀態(tài)。這一組API常?？梢杂糜谕茢嗄承┕?jié)點是否可以被用戶看見、有多大比例可以被用戶看見。

API涉及到的概念總共有5個

• 參照節(jié)點：監(jiān)聽的參照節(jié)點，取它的布局區(qū)域作為參照區(qū)域。如果有多個參照節(jié)點，則會取它們布局區(qū)域的 交集 作為參照區(qū)域。頁面顯示區(qū)域也可作為參照區(qū)域之一。
• 目標(biāo)節(jié)點：監(jiān)聽的目標(biāo)，默認(rèn)只能是一個節(jié)點（使用 selectAll 選項時，可以同時監(jiān)聽多個節(jié)點）。
• 相交區(qū)域：目標(biāo)節(jié)點的布局區(qū)域與參照區(qū)域的相交區(qū)域。
• 相交比例：相交區(qū)域占參照區(qū)域的比例。
• 閾值：相交比例如果達(dá)到閾值，則會觸發(fā)監(jiān)聽器的回調(diào)函數(shù)。閾值可以有多個。

通過以上API和概念的了解，可以獲取到圖片是否可以被用戶看見或者即將被看見，通過回調(diào)將圖片加載顯示出來，然后監(jiān)聽下一組即將被顯示的圖片，這樣就可以達(dá)到懶加載圖片的方式，以下是代碼展示

//index.js  
//獲取應(yīng)用實例  
const app = getApp()  
let lazyload;  
Page({  
    data: {  
        classNote: 'item-',                    //循環(huán)節(jié)點前綴  
        count: 0,                              //總共加載到多少張  
        img: []                                //圖片列表  
    },  
    onReady: function () {  
        //可以先初始化首屏需要展示的圖片  
        that.setData({  
            count: 5  
        })  
        //開始監(jiān)聽節(jié)點，注意需要在onReady才能監(jiān)聽，此時節(jié)點才渲染  
        lazyload.observe();  
    },  
    viewPort: function () {  
        const that = this;  
        var intersectionObserver = wx.createIntersectionObserver();  
        //這里bottom：100，是指顯示區(qū)域以下 100px 時，就會觸發(fā)回調(diào)函數(shù)。  
        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();  
            }  
        })  
    }  
})  
 
//page.wxml  
<view>  
    <view wx:for="{{img}}" class="item-{{index}}">  
        <image style="display: {{index < count ? 'block' : 'none'}}" src="{{item}}"></image>  
    </view>  
</view> 

這里有3點需要注意的

1. 監(jiān)聽的節(jié)點需要先渲染，也就是說監(jiān)聽這個動作需要在onReady的時候
2. 上述示例監(jiān)聽是依賴循環(huán)節(jié)點的class，最少需要先渲染一個節(jié)點才能監(jiān)聽
3. 每次監(jiān)聽完一個循環(huán)節(jié)點后，結(jié)束監(jiān)聽，然后繼續(xù)監(jiān)聽下一個節(jié)點

結(jié)果

無論怎么快速滾動，F(xiàn)PS都能保持在60

總結(jié)

H5其實也有一個類似的API，小程序的使用方式跟H5也是很類似，有很多東西都可以參考。針對上述監(jiān)聽的方式，我這邊簡單封裝了一個庫來調(diào)用，歡迎star。