日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
性能更優(yōu)越的小程序圖片懶加載方式

意義

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的漠河網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

懶加載或者可以說是延遲加載，針對非首屏或者用戶"看不到"的地方延遲加載，有利于頁面首屏加載速度快、節(jié)約了流量,用戶體驗(yàn)好。

實(shí)現(xiàn)方式

傳統(tǒng)H5的懶加載方式都是通過監(jiān)聽頁面的scroll事件來實(shí)現(xiàn)的，結(jié)合viewport的高度來判斷。

小程序也類似，通過監(jiān)聽頁面onPageScroll事件獲取當(dāng)前滾動的數(shù)據(jù)，結(jié)合getSystemInfo獲取設(shè)備信息來判斷。由于scroll事件密集發(fā)生，計算量很大，經(jīng)常會造成FPS降低、頁面卡頓等問題。

這里說的是通過另外一種方式來實(shí)現(xiàn)

createIntersectionObserver

小程序基礎(chǔ)庫 1.9.3 開始支持，了解下

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

API涉及到的概念總共有5個

  • 參照節(jié)點(diǎn)：監(jiān)聽的參照節(jié)點(diǎn)，取它的布局區(qū)域作為參照區(qū)域。如果有多個參照節(jié)點(diǎn)，則會取它們布局區(qū)域的 交集 作為參照區(qū)域。頁面顯示區(qū)域也可作為參照區(qū)域之一。
  • 目標(biāo)節(jié)點(diǎn)：監(jiān)聽的目標(biāo)，默認(rèn)只能是一個節(jié)點(diǎn)（使用 selectAll 選項時，可以同時監(jiān)聽多個節(jié)點(diǎn)）。
  • 相交區(qū)域：目標(biāo)節(jié)點(diǎn)的布局區(qū)域與參照區(qū)域的相交區(qū)域。
  • 相交比例：相交區(qū)域占參照區(qū)域的比例。
  • 閾值：相交比例如果達(dá)到閾值，則會觸發(fā)監(jiān)聽器的回調(diào)函數(shù)。閾值可以有多個。

通過以上API和概念的了解，可以獲取到圖片是否可以被用戶看見或者即將被看見，通過回調(diào)將圖片加載顯示出來，然后監(jiān)聽下一組即將被顯示的圖片，這樣就可以達(dá)到懶加載圖片的方式，以下是代碼展示

 
 
 
 
      
  
  
  
  1. //index.js  
    2.   
  
  
  
  2. //獲取應(yīng)用實(shí)例  
    3.   
  
  
  
  3. const app = getApp()  
    4.   
  
  
  
  4. let lazyload;  
    5.   
  
  
  
  5. Page({  
    6.   
  
  
  
  6.     data: {  
    7.   
  
  
  
  7.         classNote: 'item-',                    //循環(huán)節(jié)點(diǎn)前綴  
    8.   
  
  
  
  8.         count: 0,                              //總共加載到多少張  
    9.   
  
  
  
  9.         img: []                                //圖片列表  
    10.   
  
  
  
  10.     },  
    11.   
  
  
  
  11.     onReady: function () {  
    12.   
  
  
  
  12.         //可以先初始化首屏需要展示的圖片  
    13.   
  
  
  
  13.         that.setData({  
    14.   
  
  
  
  14.             count: 5  
    15.   
  
  
  
  15.         })  
    16.   
  
  
  
  16.         //開始監(jiān)聽節(jié)點(diǎn)，注意需要在onReady才能監(jiān)聽，此時節(jié)點(diǎn)才渲染  
    17.   
  
  
  
  17.         lazyload.observe();  
    18.   
  
  
  
  18.     },  
    19.   
  
  
  
  19.     viewPort: function () {  
    20.   
  
  
  
  20.         const that = this;  
    21.   
  
  
  
  21.         var intersectionObserver = wx.createIntersectionObserver();  
    22.   
  
  
  
  22.         //這里bottom：100，是指顯示區(qū)域以下 100px 時，就會觸發(fā)回調(diào)函數(shù)。  
    23.   
  
  
  
  23.         intersectionObserver.relativeToViewport({bottom: 100}).observe(this.data.classNote + this.data.count, (res) => {  
    24.   
  
  
  
  24.             if(res.boundingClientRect.top > 0){  
    25.   
  
  
  
  25.                 intersectionObserver.disconnect()  
    26.   
  
  
  
  26.                 that.setData({  
    27.   
  
  
  
  27.                     count: that.data.count + 5  
    28.   
  
  
  
  28.                 })  
    29.   
  
  
  
  29.                 that.viewPort();  
    30.   
  
  
  
  30.             }  
    31.   
  
  
  
  31.         })  
    32.   
  
  
  
  32.     }  
    33.   
  
  
  
  33. })  
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35. //page.wxml  
    36.   
  
  
  
  36.   
    37.   
  
  
  
  37.       
    38.   
  
  
  
  38.           
    39.   
  
  
  
  39.       
    40.   
  
  
  
  40.  
    41.

這里有3點(diǎn)需要注意的

  1. 監(jiān)聽的節(jié)點(diǎn)需要先渲染，也就是說監(jiān)聽這個動作需要在onReady的時候
  2. 上述示例監(jiān)聽是依賴循環(huán)節(jié)點(diǎn)的class，最少需要先渲染一個節(jié)點(diǎn)才能監(jiān)聽
  3. 每次監(jiān)聽完一個循環(huán)節(jié)點(diǎn)后，結(jié)束監(jiān)聽，然后繼續(xù)監(jiān)聽下一個節(jié)點(diǎn)

結(jié)果

無論怎么快速滾動，F(xiàn)PS都能保持在60

總結(jié)

H5其實(shí)也有一個類似的API，小程序的使用方式跟H5也是很類似，有很多東西都可以參考。針對上述監(jiān)聽的方式，我這邊簡單封裝了一個庫來調(diào)用，歡迎star。


本文名稱：性能更優(yōu)越的小程序圖片懶加載方式
網(wǎng)站鏈接：http://www.dlmjj.cn/article/dphjogs.html