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

網站建設哪家好，找創新互聯！專注于網頁設計、網站建設、微信開發、小程序設計、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了彰武免費建站歡迎大家使用！

意義

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

實現方式

傳統H5的懶加載方式都是通過監聽頁面的scroll事件來實現的，結合viewport的高度來判斷。

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

這里說的是通過另外一種方式來實現

createIntersectionObserver

小程序基礎庫 1.9.3 開始支持，了解下

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

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

• 參照節點：監聽的參照節點，取它的布局區域作為參照區域。如果有多個參照節點，則會取它們布局區域的 交集 作為參照區域。頁面顯示區域也可作為參照區域之一。

• 目標節點：監聽的目標，默認只能是一個節點（使用 selectAll 選項時，可以同時監聽多個節點）。

• 相交區域：目標節點的布局區域與參照區域的相交區域。

• 相交比例：相交區域占參照區域的比例。

• 閾值：相交比例如果達到閾值，則會觸發監聽器的回調函數。閾值可以有多個。

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

//index.js
//獲取應用實例
const app = getApp()

let lazyload;

Page({
  data: {
    classNote: 'item-',          //循環節點前綴
    count: 0,               //總共加載到多少張
    img: []                //圖片列表
  },
  onReady: function () {
    //可以先初始化首屏需要展示的圖片
    that.setData({
      count: 5
    })
    //開始監聽節點，注意需要在onReady才能監聽，此時節點才渲染
    lazyload.observe();
  },
  viewPort: function () {
    const that = this;
    var intersectionObserver = wx.createIntersectionObserver();
    //這里bottom：100，是指顯示區域以下 100px 時，就會觸發回調函數。
    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  src="{{item}}"></image>
  </view>
</view>

這里有2點需要注意的

• 監聽的節點需要先渲染，也就是說監聽這個動作需要在onReady的時候

• 上述示例監聽是依賴循環節點的class，最少需要先渲染一個節點才能監聽

• 每次監聽完一個循環節點后，結束監聽，然后繼續監聽下一個節點結果

無論怎么快速滾動，FPS都能保持在60

感謝你能夠認真閱讀完這篇文章，希望小編分享的“小程序如何實現圖片懶加載方式”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

文章標題：小程序如何實現圖片懶加載方式
當前路徑：http://vcdvsql.cn/article26/gdjojg.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、網站設計、云服務器、用戶體驗、App設計、手機網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯