意義

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

實(shí)現(xiàn)方式

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

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

這里說(shuō)的是通過(guò)另外一種方式來(lái)實(shí)現(xiàn)

createIntersectionObserver

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

節(jié)點(diǎn)布局交叉狀態(tài)API可用于監(jiān)聽(tīng)兩個(gè)或多個(gè)組件節(jié)點(diǎn)在布局位置上的相交狀態(tài)。這一組API常常可以用于推斷某些節(jié)點(diǎn)是否可以被用戶(hù)看見(jiàn)、有多大比例可以被用戶(hù)看見(jiàn)。

API涉及到的概念總共有5個(gè)

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

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

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

這里有2點(diǎn)需要注意的

• 監(jiān)聽(tīng)的節(jié)點(diǎn)需要先渲染，也就是說(shuō)監(jiān)聽(tīng)這個(gè)動(dòng)作需要在onReady的時(shí)候
• 上述示例監(jiān)聽(tīng)是依賴(lài)循環(huán)節(jié)點(diǎn)的class，最少需要先渲染一個(gè)節(jié)點(diǎn)才能監(jiān)聽(tīng)
• 每次監(jiān)聽(tīng)完一個(gè)循環(huán)節(jié)點(diǎn)后，結(jié)束監(jiān)聽(tīng)，然后繼續(xù)監(jiān)聽(tīng)下一個(gè)節(jié)點(diǎn)結(jié)果

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

總結(jié)

H5其實(shí)也有一個(gè)類(lèi)似的API，小程序的使用方式跟H5也是很類(lèi)似，有很多東西都可以參考。針對(duì)上述監(jiān)聽(tīng)的方式，我這邊簡(jiǎn)單封裝了一個(gè)庫(kù)來(lái)調(diào)用，歡迎star。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。