效果圖
既然來了，把妹子都給你。
定義
懶加載，前端人都知道的一種性能優(yōu)化方式，簡單的來說，只有當圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。
實現(xiàn)原理
監(jiān)聽頁面的scroll事件,判讀元素距離頁面的top值是否是小于等于頁面的可視高度
判斷邏輯代碼如下
element.getBoundingClientRect().top <= document.documentElement.clientHeight ? 顯示 : 默認
我們知道小程序頁面的腳本邏輯是在JsCore中運行，JsCore是一個沒有窗口對象的環(huán)境，所以不能在腳本中使用window，也無法在腳本中操作組件。
所以關于圖片懶加載就需要在數(shù)據(jù)上面做文章了。
頁面
頁面上面只需要根據(jù)數(shù)據(jù)的某一個字段來判斷是否顯示圖片就可以了，字段為Boolean類型，當為false的時候顯示默認圖片就行了。
代碼大概長成這樣
<view wx:for="{{list}}" class='item item-{{index}}'
wx:key="{{index}}">
<image class="{{item.show ? 'active': ''}}" src="{{item.show ? item.src : item.def}}"></image>
</view>
布局跟簡單，view組件里面有個圖片，并循環(huán)list，有多少就展示多少
image組件的src字段通過每一項的show來進行綁定，active是加了個透明的過渡
樣式
image{
transition: all .3s ease;
opacity: 0;
}
.active{
opacity: 1;
}
邏輯
本位主要講解懶加載，所以把數(shù)據(jù)寫死在頁面上了
數(shù)據(jù)結(jié)構(gòu)如下：
我們使用兩種方式來實現(xiàn)懶加載，準備好沒有，一起來快樂的擼碼吧。
WXML節(jié)點信息
小程序支持調(diào)用createSelectQuery創(chuàng)建一個SelectorQuery實例，并使用select方法來選擇節(jié)點，并通過boundingClientRect來獲取節(jié)點信息。
wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{
console.log(ret)
}).exec()
顯示結(jié)果如下
悄悄告訴你，小程序里面有個onPageScroll函數(shù)，是用來監(jiān)聽頁面的滾動的。 還有個getSystemInfo函數(shù)，可以獲取獲取系統(tǒng)信息，里面包含屏幕的高度。
接下來，思路就透徹了吧。還是上面的邏輯， 扒拉扒拉直接寫代碼就行了,這里只寫下主要的邏輯，完整代碼請戳文末github
showImg(){
let group = this.data.group
let height = this.data.height // 頁面的可視高度
wx.createSelectorQuery().selectAll('.item').boundingClientRect((ret) => {
ret.forEach((item, index) => {
if (item.top <= height) { 判斷是否在顯示范圍內(nèi)
group[index].show = true // 根據(jù)下標改變狀態(tài)
}
})
this.setData({
group
})
}).exec()
}
onPageScroll(){ // 滾動事件
this.showImg()
}
至此，我們完成了一個小程序版的圖片懶加載，只是思維轉(zhuǎn)變了下，其實并沒有改變實現(xiàn)方式。我們來學些新的東西吧。
節(jié)點布局相交狀態(tài)
節(jié)點相交狀態(tài)是啥？它是一個新的API，叫做IntersectionObserver, 本文只講解簡單的使用，了解更多請猛戳沒錯，就是點我
小程序里面給它的定義是節(jié)點布局交叉狀態(tài)API可用于監(jiān)聽兩個或多個組件節(jié)點在布局位置上的相交狀態(tài)。這一組API常?？梢杂糜谕茢嗄承┕?jié)點是否可以被用戶看見、有多大比例可以被用戶看見。
里面設計的概念主要有五個，分別為
參照節(jié)點：以某參照節(jié)點的布局區(qū)域作為參照區(qū)域，參照節(jié)點可以有多個，多個話參照區(qū)域取它們的布局區(qū)域的交集
目標節(jié)點：監(jiān)聽的目標，只能是一個節(jié)點
相交區(qū)域：目標節(jié)點與參照節(jié)點的相交區(qū)域
相交比例：目標節(jié)點與參照節(jié)點的相交比例
閾值：可以有多個，默認為[0], 可以理解為交叉比例，例如[0.2, 0.5]
關于它的API有五個，依次如下
1、createIntersectionObserver([this], [options])，見名知意,創(chuàng)建一個IntersectionObserver實例
2、intersectionObserver.relativeTo(selector, [margins]), 指定節(jié)點作為參照區(qū)域，margins參數(shù)可以放大縮小參照區(qū)域，可以包含top、left、bottom、right四項
3、intersectionObserver.relativeToViewport([margin])，指定頁面顯示區(qū)域為參照區(qū)域
4、intersectionObserver.observer(targetSelector, callback)，參數(shù)為指定監(jiān)聽的節(jié)點和一個回調(diào)函數(shù)，目標元素的相交狀態(tài)發(fā)生變化時就會觸發(fā)此函數(shù)，callback函數(shù)包含一個result，下面再講
5、intersectionObserver.disconnect() 停止監(jiān)聽，回調(diào)函數(shù)不會再觸發(fā)
然后說下callback函數(shù)中的result，它包含的字段為
我們主要使用intersectionRatio進行判斷，當它大于0時說明是相交的也就是可見的。
先來波測試題，請說出下面的函數(shù)做了什么，并且log函數(shù)會執(zhí)行幾次
1、
wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => {
console.log('監(jiān)聽box組件觸發(fā)的函數(shù)')
})
2、
wx.createIntersectionObserver().relativeTo('.box').observer('.item', (result) => {
console.log('監(jiān)聽item組件觸發(fā)的函數(shù)')
})
3、
wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => {
if(result.intersectionRatio > 0){
console.log('.box組件是可見的')
}
})
duang，揭曉答案。
第一個以當前頁面的視窗監(jiān)聽了.box組件，log會觸發(fā)兩次，一次是進入頁面一次是離開頁面
第二個以.box節(jié)點的布局區(qū)域監(jiān)聽了.item組件，log會觸發(fā)兩次，一次是進入頁面一次是離開頁面
第三個以當前頁面的視窗監(jiān)聽了.box組件，log只會在節(jié)點可見的時候觸發(fā)
好了，題也做了，API你也掌握了，相信你已經(jīng)可以使用IntersectionObserver來實現(xiàn)圖片懶加載了吧，主要邏輯如下
let group = this.data.group // 獲取圖片數(shù)組數(shù)據(jù)
for (let i in this.data.group){ wx.createIntersectionObserver().relativeToViewport().observe('.item-'+ i, (ret) => {
if (ret.intersectionRatio > 0){
group[i].show = true
}
this.setData({
group
})
})
}
最后
至此，我們使用兩種方式實現(xiàn)了小程序版本的圖片懶加載，可以發(fā)現(xiàn)，使用IntersectionObserver來實現(xiàn)不要太酸爽。
