效能更優越的小程式圖片懶載入方式

jayzou發表於2018-07-16

意義

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

實現方式

傳統H5的懶載入方式都是通過監聽頁面的scroll事件來實現的，結合viewport的高度來判斷。 小程式也類似，通過監聽頁面onPageScroll事件獲取當前滾動的資料，結合getSystemInfo獲取裝置資訊來判斷。由於scroll事件密集發生，計算量很大，經常會造成FPS降低、頁面卡頓等問題。 這裡說的是通過另外一種方式來實現

createIntersectionObserver

小程式基礎庫 1.9.3 開始支援，瞭解下

節點佈局交叉狀態API可用於監聽兩個或多個元件節點在佈局位置上的相交狀態。這一組API常常可以用於推斷某些節點是否可以被使用者看見、有多大比例可以被使用者看見。

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 style="display: {{index < count ? 'block' : 'none'}}" src="{{item}}"></image>
    </view>
</view>
複製程式碼

這裡有2點需要注意的

  1. 監聽的節點需要先渲染，也就是說監聽這個動作需要在onReady的時候
  2. 上述示例監聽是依賴迴圈節點的class，最少需要先渲染一個節點才能監聽
  3. 每次監聽完一個迴圈節點後，結束監聽，然後繼續監聽下一個節點

結果

圖片太大，無法上傳，戳這裡預覽

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

總結

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

相關文章