微信小程序--實現圖片懶加載（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，須要等前一個節點循環完成，才能監聽下一個，目前是用延遲來處理的，可能還有更好的方案？

參考文檔

微信小程序官方文檔