微信小程式--實現圖片懶載入（lazyload）

前言

在微信小程式中，實現圖片懶載入的方式有很多

實現思路

• image標籤裡的lazy-load屬性
• 通過監聽滾動條滑動事件，判斷元素距離頁面頂部的距離是否小於等於頁面的可視高度
• Intersection Observer API

鑑於第一種方式目前看不出效果，第二種方式程式碼量還是有點大的，我們在這裡用第三種方式來實現圖片懶載入。

官方解釋

WXML節點佈局相交狀態

• 節點佈局交叉狀態API可用於監聽兩個或多個元件節點在佈局位置上的相交狀態。這一組API常常可以用於推斷某些節點是否可以被使用者看見、有多大比例可以被使用者看見。
• 涉及到以下幾個概念
  • 參照節點：監聽的參照節點，取它的佈局區域作為參照區域。如果有多個參照節點，則會取它們佈局區域的 交集 作為參照區域。頁面顯示區域也可作為參照區域之一。
  • 目標節點：監聽的目標，預設只能是一個節點（使用 selectAll 選項時，可以同時監聽多個節點）。
  • 相交區域：目標節點的佈局區域與參照區域的相交區域。
  • 相交比例：相交區域佔參照區域的比例。
  • 閾值：相交比例如果達到閾值，則會觸發監聽器的回撥函式。閾值可以有多個。

程式碼實現

1. wxml檔案

	<scroll-view>
		<view class="image-panel item item-{{index}}" wx:for="{{list}}" wx:for-item="item" wx:key="{{index}}">
			<view class="video-play" bindtap="linkToDetail">
				<image class="{{item.show ? 'active': ''}}" src="{{item.show ? item.cover : default}}" mode="widthFix" lazy-load />
			</view>
		</view>
	</scroll-view>
複製程式碼

注意

1. 這裡用到了第一種方式，也就是在image標籤里加上了lazy-load屬性，要配合scroll-view使用才有效果。可惜，在本地沒有測出效果。
2. 通過show這個欄位來判斷是否顯示原圖，未載入的情況下使用預設圖來展示。

2. js檔案

    const url = "";//業務api地址
    const that = this;
    const obj = {
        method: 'get',
        url: url,
        success: function (res) {
            var items = res.data.items;
            that.setData({
                list: items
            })
            setTimeout(() => {
                for (let i in res.data.items) {
                    wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe('.item-' + i, (res) => {
                        if (res.intersectionRatio > 0) {
                            items[i].show = true
                        }
                        that.setData({
                            list: items
                        })
                    })
                }
            }, 1*1000);
        }
    }
    common.httpRequest(obj)
複製程式碼

注意

1. 監聽的節點需要先渲染,所以需要初始化列表，並用預設圖佔位。
2. 延遲執行createIntersectionObserver()方法

總結

1. 初始化列表是否可以初始化部分圖片，或者首屏圖片。
2. 監聽需要依賴節點的className，需要等前一個節點迴圈完成，才能監聽下一個，目前是用延遲來處理的，可能還有更好的方案？

參考文件

微信小程式官方文件