微信小程序圖片懶加載的實現(xiàn)方案
定義
懶加載,前端人都知道的一種性能優(yōu)化方式,簡單的來說,只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時,才設(shè)置圖片正真的路徑,讓圖片顯示出來。這就是圖片懶加載。
實現(xiàn)原理
監(jiān)聽頁面的scroll事件,判讀元素距離頁面的top值是否是小于等于頁面的可視高度
判斷邏輯代碼如下
element.getBoundingClientRect().top <= document.documentElement.clientHeight ? 顯示 : 默認(rèn)
我們知道小程序頁面的腳本邏輯是在JsCore中運行,JsCore是一個沒有窗口對象的環(huán)境,所以不能在腳本中使用window,也無法在腳本中操作組件。
所以關(guān)于圖片懶加載就需要在數(shù)據(jù)上面做文章了。
我們使用兩種方式來實現(xiàn)懶加載,準(zhǔn)備好沒有,一起來快樂的擼碼吧。
WXML節(jié)點信息
小程序支持調(diào)用createSelectQuery創(chuàng)建一個SelectorQuery實例,并使用select方法來選擇節(jié)點,并通過boundingClientRect來獲取節(jié)點信息。
wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{ console.log(ret) }).exec()
悄悄告訴你,小程序里面有個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ù)下標(biāo)改變狀態(tài) } }) this.setData({ group }) }).exec() } onPageScroll(){ // 滾動事件 this.showImg() }
至此,我們完成了一個小程序版的圖片懶加載,只是思維轉(zhuǎn)變了下,其實并沒有改變實現(xiàn)方式。我們來學(xué)些新的東西吧。
節(jié)點布局相交狀態(tài)
節(jié)點相交狀態(tài)是啥?它是一個新的API,叫做IntersectionObserver, 本文只講解簡單的使用
小程序里面給它的定義是節(jié)點布局交叉狀態(tài)API可用于監(jiān)聽兩個或多個組件節(jié)點在布局位置上的相交狀態(tài)。這一組API常??梢杂糜谕茢嗄承┕?jié)點是否可以被用戶看見、有多大比例可以被用戶看見。
里面設(shè)計的概念主要有五個,分別為
- 參照節(jié)點:以某參照節(jié)點的布局區(qū)域作為參照區(qū)域,參照節(jié)點可以有多個,多個話參照區(qū)域取它們的布局區(qū)域的交集
- 目標(biāo)節(jié)點:監(jiān)聽的目標(biāo),只能是一個節(jié)點
- 相交區(qū)域:目標(biāo)節(jié)點與參照節(jié)點的相交區(qū)域
- 相交比例:目標(biāo)節(jié)點與參照節(jié)點的相交比例
- 閾值:可以有多個,默認(rèn)為[0], 可以理解為交叉比例,例如[0.2, 0.5]
關(guān)于它的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ù),目標(biāo)元素的相交狀態(tài)發(fā)生變化時就會觸發(fā)此函數(shù),callback函數(shù)包含一個result,下面再講
5、intersectionObserver.disconnect() 停止監(jiān)聽,回調(diào)函數(shù)不會再觸發(fā)
我們主要使用intersectionRatio進(jìn)行判斷,當(dāng)它大于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,揭曉答案。
第一個以當(dāng)前頁面的視窗監(jiān)聽了.box組件,log會觸發(fā)兩次,一次是進(jìn)入頁面一次是離開頁面
第二個以.box節(jié)點的布局區(qū)域監(jiān)聽了.item組件,log會觸發(fā)兩次,一次是進(jìn)入頁面一次是離開頁面
第三個以當(dāng)前頁面的視窗監(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)不要太酸爽。