意義
懶加載或者能夠說是延遲加載，針對非首屏或者用戶"看不到"的地方延遲加載，有利於頁面首屏加載速度快、節約了流量,用戶體驗好html
實現方式
傳統H5的懶加載方式都是經過監聽頁面的scroll事件來實現的，結合viewport的高度來判斷。
小程序也相似，經過監聽頁面onPageScroll事件獲取當前滾動的數據，結合getSystemInfo獲取設備信息來判斷。因爲scroll事件密集發生，計算量很大，常常會形成FPS下降、頁面卡頓等問題。
這裏說的是經過另一種方式來實現git
createIntersectionObserver
小程序基礎庫 1.9.3 開始支持，瞭解下github
節點佈局交叉狀態API可用於監聽兩個或多個組件節點在佈局位置上的相交狀態。這一組API經常能夠用於推斷某些節點是否能夠被用戶看見、有多大比例能夠被用戶看見。
API涉及到的概念總共有5個小程序
- 參照節點：監聽的參照節點，取它的佈局區域做爲參照區域。若是有多個參照節點，則會取它們佈局區域的 交集 做爲參照區域。頁面顯示區域也可做爲參照區域之一。
- 目標節點：監聽的目標，默認只能是一個節點（使用 selectAll 選項時，能夠同時監聽多個節點）。
- 相交區域：目標節點的佈局區域與參照區域的相交區域。
- 相交比例：相交區域佔參照區域的比例。
- 閾值：相交比例若是達到閾值，則會觸發監聽器的回調函數。閾值能夠有多個。
經過以上API和概念的瞭解，能夠獲取到圖片是否能夠被用戶看見或者即將被看見，經過回調將圖片加載顯示出來，而後監聽下一組即將被顯示的圖片，這樣就能夠達到懶加載圖片的方式，如下是代碼展現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點須要注意的app
- 監聽的節點須要先渲染，也就是說監聽這個動做須要在
onReady的時候 - 上述示例監聽是依賴循環節點的
class，最少須要先渲染一個節點才能監聽 - 每次監聽完一個循環節點後，結束監聽，而後繼續監聽下一個節點
結果
不管怎麼快速滾動，FPS都能保持在60函數
總結
H5其實也有一個相似的API，小程序的使用方式跟H5也是很相似，有不少東西均可以參考。針對上述監聽的方式，我這邊簡單封裝了一個庫來調用，歡迎star。佈局