這篇文章主要介紹了小程序中怎么實現(xiàn)圖片懶加載，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為五龍口等地區(qū)用戶提供了全套網頁設計制作服務，及五龍口網站建設行業(yè)解決方案。主營業(yè)務為網站建設、做網站、五龍口網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

定義

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

實現(xiàn)原理

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

判斷邏輯代碼如下

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

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

所以關于圖片懶加載就需要在數據上面做文章了。

頁面

頁面上面只需要根據數據的某一個字段來判斷是否顯示圖片就可以了，字段為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;
}

邏輯

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

數據結構如下：

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

WXML節(jié)點信息

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

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

顯示結果如下

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

接下來，思路就透徹了吧。還是上面的邏輯， 扒拉扒拉直接寫代碼就行了,這里只寫下主要的邏輯

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) { 判斷是否在顯示范圍內
         group[index].show = true // 根據下標改變狀態(tài)
       }
     })
     this.setData({
       group
     })
    }).exec()

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

至此，我們完成了一個小程序版的圖片懶加載，只是思維轉變了下，其實并沒有改變實現(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參數可以放大縮小參照區(qū)域，可以包含top、left、bottom、right四項

3、intersectionObserver.relativeToViewport([margin])，指定頁面顯示區(qū)域為參照區(qū)域

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

5、intersectionObserver.disconnect() 停止監(jiān)聽，回調函數不會再觸發(fā)

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

字段名	類型	說明
intersectionRatio	Number	相交比例
intersectionRect	Object	相交區(qū)域的邊界，包含 left 、 right 、 top 、 bottom 四項
boundingClientRect	Object	目標節(jié)點布局區(qū)域的邊界，包含 left 、 right 、 top 、 bottom 四項
relativeRect	Object	參照區(qū)域的邊界，包含 left 、 right 、 top 、 bottom 四項
time	Number	相交檢測時的時間戳

我們主要使用intersectionRatio進行判斷，當它大于0時說明是相交的也就是可見的。

先來波測試題，請說出下面的函數做了什么，并且log函數會執(zhí)行幾次

1、
wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => {
     console.log('監(jiān)聽box組件觸發(fā)的函數')   
 })
 
2、
wx.createIntersectionObserver().relativeTo('.box').observer('.item', (result) => {
     console.log('監(jiān)聽item組件觸發(fā)的函數') 
})

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你也掌握了，相信你已經可以使用IntersectionObserver來實現(xiàn)圖片懶加載了吧，主要邏輯如下

let group = this.data.group // 獲取圖片數組數據
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)圖片懶加載”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

標題名稱：小程序中怎么實現(xiàn)圖片懶加載
網站URL：http://chinadenli.net/article44/ppgche.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、用戶體驗、品牌網站制作、虛擬主機、小程序開發(fā)、Google

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)