這篇文章主要介紹了小程序如何實(shí)現(xiàn)圖片懶加載方式，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了彰武免費(fèi)建站歡迎大家使用！

意義

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

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

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

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

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

createIntersectionObserver

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

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

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

• 參照節(jié)點(diǎn)：監(jiān)聽的參照節(jié)點(diǎn)，取它的布局區(qū)域作為參照區(qū)域。如果有多個(gè)參照節(jié)點(diǎn)，則會(huì)取它們布局區(qū)域的 交集 作為參照區(qū)域。頁面顯示區(qū)域也可作為參照區(qū)域之一。

• 目標(biāo)節(jié)點(diǎn)：監(jiān)聽的目標(biāo)，默認(rèn)只能是一個(gè)節(jié)點(diǎn)（使用 selectAll 選項(xiàng)時(shí)，可以同時(shí)監(jiān)聽多個(gè)節(jié)點(diǎn)）。

• 相交區(qū)域：目標(biāo)節(jié)點(diǎn)的布局區(qū)域與參照區(qū)域的相交區(qū)域。

• 相交比例：相交區(qū)域占參照區(qū)域的比例。

• 閾值：相交比例如果達(dá)到閾值，則會(huì)觸發(fā)監(jiān)聽器的回調(diào)函數(shù)。閾值可以有多個(gè)。

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

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()

let lazyload;

Page({
  data: {
    classNote: 'item-',          //循環(huán)節(jié)點(diǎn)前綴
    count: 0,               //總共加載到多少張
    img: []                //圖片列表
  },
  onReady: function () {
    //可以先初始化首屏需要展示的圖片
    that.setData({
      count: 5
    })
    //開始監(jiān)聽節(jié)點(diǎn)，注意需要在onReady才能監(jiān)聽，此時(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


  
    
  

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

• 監(jiān)聽的節(jié)點(diǎn)需要先渲染，也就是說監(jiān)聽這個(gè)動(dòng)作需要在onReady的時(shí)候

• 上述示例監(jiān)聽是依賴循環(huán)節(jié)點(diǎn)的class，最少需要先渲染一個(gè)節(jié)點(diǎn)才能監(jiān)聽

• 每次監(jiān)聽完一個(gè)循環(huán)節(jié)點(diǎn)后，結(jié)束監(jiān)聽，然后繼續(xù)監(jiān)聽下一個(gè)節(jié)點(diǎn)結(jié)果

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“小程序如何實(shí)現(xiàn)圖片懶加載方式”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!