效果圖

既然來了，把妹子都給你。

 

 

定義

懶加載，前端人都知道的一種性能優(yōu)化方式，簡單的來說，只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，才設(shè)置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。

實(shí)現(xiàn)原理

監(jiān)聽頁面的scroll事件,判讀元素距離頁面的top值是否是小于等于頁面的可視高度

判斷邏輯代碼如下

element.getBoundingClientRect().top <= document.documentElement.clientHeight ? 顯示 : 默認(rèn)

我們知道小程序頁面的腳本邏輯是在JsCore中運(yùn)行，JsCore是一個(gè)沒有窗口對(duì)象的環(huán)境，所以不能在腳本中使用window，也無法在腳本中操作組件。

所以關(guān)于圖片懶加載就需要在數(shù)據(jù)上面做文章了。

 

 

頁面

頁面上面只需要根據(jù)數(shù)據(jù)的某一個(gè)字段來判斷是否顯示圖片就可以了，字段為Boolean類型，當(dāng)為false的時(shí)候顯示默認(rèn)圖片就行了。

代碼大概長成這樣

<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組件里面有個(gè)圖片，并循環(huán)list，有多少就展示多少

image組件的src字段通過每一項(xiàng)的show來進(jìn)行綁定，active是加了個(gè)透明的過渡

樣式

image{
	transition: all .3s ease;
	opacity: 0;
}
.active{
	opacity: 1;
}

邏輯

本位主要講解懶加載，所以把數(shù)據(jù)寫死在頁面上了

數(shù)據(jù)結(jié)構(gòu)如下：

 

 

我們使用兩種方式來實(shí)現(xiàn)懶加載，準(zhǔn)備好沒有，一起來快樂的擼碼吧。

WXML節(jié)點(diǎn)信息

小程序支持調(diào)用createSelectQuery創(chuàng)建一個(gè)SelectorQuery實(shí)例，并使用select方法來選擇節(jié)點(diǎn)，并通過boundingClientRect來獲取節(jié)點(diǎn)信息。

wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{
	console.log(ret)
}).exec()
 

顯示結(jié)果如下

悄悄告訴你，小程序里面有個(gè)onPageScroll函數(shù)，是用來監(jiān)聽頁面的滾動(dòng)的。 還有個(gè)getSystemInfo函數(shù)，可以獲取獲取系統(tǒng)信息，里面包含屏幕的高度。

 

接下來，思路就透徹了吧。還是上面的邏輯， 扒拉扒拉直接寫代碼就行了,這里只寫下主要的邏輯，完整代碼請(qǐ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ù)下標(biāo)改變狀態(tài)
	   }
	 })
	 this.setData({
	   group
	 })
	}).exec()

}
onPageScroll(){ // 滾動(dòng)事件
	this.showImg()
}

至此，我們完成了一個(gè)小程序版的圖片懶加載，只是思維轉(zhuǎn)變了下，其實(shí)并沒有改變實(shí)現(xiàn)方式。我們來學(xué)些新的東西吧。

節(jié)點(diǎn)布局相交狀態(tài)

節(jié)點(diǎn)相交狀態(tài)是啥？它是一個(gè)新的API，叫做IntersectionObserver, 本文只講解簡單的使用，了解更多請(qǐng)猛戳沒錯(cuò)，就是點(diǎn)我

小程序里面給它的定義是節(jié)點(diǎn)布局交叉狀態(tài)API可用于監(jiān)聽兩個(gè)或多個(gè)組件節(jié)點(diǎn)在布局位置上的相交狀態(tài)。這一組API常常可以用于推斷某些節(jié)點(diǎn)是否可以被用戶看見、有多大比例可以被用戶看見。

里面設(shè)計(jì)的概念主要有五個(gè)，分別為

• 參照節(jié)點(diǎn)：以某參照節(jié)點(diǎn)的布局區(qū)域作為參照區(qū)域，參照節(jié)點(diǎn)可以有多個(gè)，多個(gè)話參照區(qū)域取它們的布局區(qū)域的交集
• 目標(biāo)節(jié)點(diǎn)：監(jiān)聽的目標(biāo)，只能是一個(gè)節(jié)點(diǎn)
• 相交區(qū)域：目標(biāo)節(jié)點(diǎn)與參照節(jié)點(diǎn)的相交區(qū)域
• 相交比例：目標(biāo)節(jié)點(diǎn)與參照節(jié)點(diǎn)的相交比例
• 閾值：可以有多個(gè)，默認(rèn)為[0], 可以理解為交叉比例，例如[0.2, 0.5]

關(guān)于它的API有五個(gè)，依次如下

1、createIntersectionObserver([this], [options])，見名知意,創(chuàng)建一個(gè)IntersectionObserver實(shí)例

2、intersectionObserver.relativeTo(selector, [margins]), 指定節(jié)點(diǎn)作為參照區(qū)域，margins參數(shù)可以放大縮小參照區(qū)域，可以包含top、left、bottom、right四項(xiàng)

3、intersectionObserver.relativeToViewport([margin])，指定頁面顯示區(qū)域?yàn)閰⒄諈^(qū)域

4、intersectionObserver.observer(targetSelector, callback)，參數(shù)為指定監(jiān)聽的節(jié)點(diǎn)和一個(gè)回調(diào)函數(shù)，目標(biāo)元素的相交狀態(tài)發(fā)生變化時(shí)就會(huì)觸發(fā)此函數(shù)，callback函數(shù)包含一個(gè)result，下面再講

5、intersectionObserver.disconnect() 停止監(jiān)聽，回調(diào)函數(shù)不會(huì)再觸發(fā)

然后說下callback函數(shù)中的result，它包含的字段為

我們主要使用intersectionRatio進(jìn)行判斷，當(dāng)它大于0時(shí)說明是相交的也就是可見的。

先來波測(cè)試題，請(qǐng)說出下面的函數(shù)做了什么，并且log函數(shù)會(huì)執(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，揭曉答案。

第一個(gè)以當(dāng)前頁面的視窗監(jiān)聽了.box組件，log會(huì)觸發(fā)兩次，一次是進(jìn)入頁面一次是離開頁面

第二個(gè)以.box節(jié)點(diǎn)的布局區(qū)域監(jiān)聽了.item組件，log會(huì)觸發(fā)兩次，一次是進(jìn)入頁面一次是離開頁面

第三個(gè)以當(dāng)前頁面的視窗監(jiān)聽了.box組件，log只會(huì)在節(jié)點(diǎn)可見的時(shí)候觸發(fā)

好了，題也做了，API你也掌握了，相信你已經(jīng)可以使用IntersectionObserver來實(shí)現(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
	   })
	 })
}

最后

至此，我們使用兩種方式實(shí)現(xiàn)了小程序版本的圖片懶加載，可以發(fā)現(xiàn)，使用IntersectionObserver來實(shí)現(xiàn)不要太酸爽。