亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

性能更優(yōu)越的小程序圖片懶加載方式

AJie / 1866人閱讀

摘要：相交比例相交區(qū)域占參照區(qū)域的比例。閾值相交比例如果達(dá)到閾值，則會(huì)觸發(fā)監(jiān)聽器的回調(diào)函數(shù)。

意義

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

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

傳統(tǒng)H5的懶加載方式都是通過(guò)監(jiān)聽頁(yè)面的scroll事件來(lái)實(shí)現(xiàn)的，結(jié)合viewport的高度來(lái)判斷。
小程序也類似，通過(guò)監(jiān)聽頁(yè)面onPageScroll事件獲取當(dāng)前滾動(dòng)的數(shù)據(jù)，結(jié)合getSystemInfo獲取設(shè)備信息來(lái)判斷。由于scroll事件密集發(fā)生，計(jì)算量很大，經(jīng)常會(huì)造成FPS降低、頁(yè)面卡頓等問(wèn)題。
這里說(shuō)的是通過(guò)另外一種方式來(lái)實(shí)現(xiàn)

createIntersectionObserver

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

節(jié)點(diǎn)布局交叉狀態(tài)API可用于監(jiān)聽兩個(gè)或多個(gè)組件節(jié)點(diǎn)在布局位置上的相交狀態(tài)。這一組API常?？梢杂糜谕茢嗄承┕?jié)點(diǎn)是否可以被用戶看見(jiàn)、有多大比例可以被用戶看見(jiàn)。

API涉及到的概念總共有5個(gè)

參照節(jié)點(diǎn)：監(jiān)聽的參照節(jié)點(diǎn)，取它的布局區(qū)域作為參照區(qū)域。如果有多個(gè)參照節(jié)點(diǎn)，則會(huì)取它們布局區(qū)域的 交集 作為參照區(qū)域。頁(yè)面顯示區(qū)域也可作為參照區(qū)域之一。

目標(biāo)節(jié)點(diǎn)：監(jiān)聽的目標(biāo)，默認(rèn)只能是一個(gè)節(jié)點(diǎn)（使用 selectAll 選項(xiàng)時(shí)，可以同時(shí)監(jiān)聽多個(gè)節(jié)點(diǎn)）。

相交區(qū)域：目標(biāo)節(jié)點(diǎn)的布局區(qū)域與參照區(qū)域的相交區(qū)域。

相交比例：相交區(qū)域占參照區(qū)域的比例。

閾值：相交比例如果達(dá)到閾值，則會(huì)觸發(fā)監(jiān)聽器的回調(diào)函數(shù)。閾值可以有多個(gè)。

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

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()

let lazyload;

Page({
    data: {
        classNote: "item-",                    //循環(huán)節(jié)點(diǎn)前綴
        count: 0,                              //總共加載到多少?gòu)?        img: []                                //圖片列表
    },
    onReady: function () {
        //可以先初始化首屏需要展示的圖片
        that.setData({
            count: 5
        })
        //開始監(jiān)聽節(jié)點(diǎn)，注意需要在onReady才能監(jiān)聽，此時(shí)節(jié)點(diǎn)才渲染
        lazyload.observe();
    },
    viewPort: function () {
        const that = this;
        var intersectionObserver = wx.createIntersectionObserver();
        //這里bottom：100，是指顯示區(qū)域以下 100px 時(shí)，就會(huì)觸發(fā)回調(diào)函數(shù)。
        intersectionObserver.relativeToViewport({bottom: 100}).observe(this.data.classNote + this.data.count, (res) => {
            if(res.boundingClientRect.top > 0){
                intersectionObserver.disconnect()
                that.setData({
                    count: that.data.count + 5
                })
                that.viewPort();
            }
        })
    }

})

//page.wxml

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

監(jiān)聽的節(jié)點(diǎn)需要先渲染，也就是說(shuō)監(jiān)聽這個(gè)動(dòng)作需要在onReady的時(shí)候

上述示例監(jiān)聽是依賴循環(huán)節(jié)點(diǎn)的class，最少需要先渲染一個(gè)節(jié)點(diǎn)才能監(jiān)聽

每次監(jiān)聽完一個(gè)循環(huán)節(jié)點(diǎn)后，結(jié)束監(jiān)聽，然后繼續(xù)監(jiān)聽下一個(gè)節(jié)點(diǎn)

結(jié)果

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

總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96160.html

相關(guān)文章

  • 實(shí)例感受-es6的常用語(yǔ)法和優(yōu)越性

    摘要：在重寫完了的時(shí)候，就個(gè)人總結(jié)了一下常用的一些常用的語(yǔ)法和比優(yōu)越的方面。參數(shù)字符串是否在原字符串的尾部返回布爾值。第一個(gè)大于的成員的索引方法，用于某個(gè)數(shù)組是否包含給定的值，返回一個(gè)布爾值。 1.前言 前幾天，用es6的語(yǔ)法重寫了我的一個(gè)代碼庫(kù)，說(shuō)是重寫，其實(shí)改動(dòng)的并不多，工作量不大。在重寫完了的時(shí)候，就個(gè)人總結(jié)了一下es6常用的一些常用的語(yǔ)法和比es5優(yōu)越的方面。下面提到的語(yǔ)法可能也就是...

    fsmStudy 評(píng)論0 收藏0

  • 前端工程師面試必備（持續(xù)更新中）

    摘要：最近的一次更新的變量有效，并且會(huì)作用于全部的引用的處理方式和相同，變量值輸出時(shí)根據(jù)之前最近的一次定義計(jì)算，每次引用最近的定義有效嵌套三種預(yù)編譯器的選擇器嵌套在使用上來(lái)說(shuō)沒(méi)有任何區(qū)別，甚至連引用父級(jí)選擇器的標(biāo)記也相同。 面試匯總一：2018大廠高級(jí)前端面試題匯總 高級(jí)面試：【半月刊】前端高頻面試題及答案匯總 css內(nèi)容 響應(yīng)式布局 當(dāng)前主流的三種預(yù)編譯器比較 CSS預(yù)處理器用一種專門的...

    jubincn 評(píng)論0 收藏0

  • 設(shè)計(jì)無(wú)限滾動(dòng)下拉加載，實(shí)踐高性能頁(yè)面真諦

    摘要：論壇上有過(guò)這么一篇熱門文章，它從角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。無(wú)限滾動(dòng)加載背后的技術(shù)挑戰(zhàn)其實(shí)比想象中要多不少。整體思路和方案設(shè)計(jì)我們要實(shí)現(xiàn)的頁(yè)面樣例如圖，它能夠做到無(wú)限下拉加載內(nèi)容。 UX Planet論壇上有過(guò)這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。 無(wú)限滾動(dòng)加載在互聯(lián)網(wǎng)上到處都有應(yīng)用：豆瓣...

    Hanks10100 評(píng)論0 收藏0

  • 設(shè)計(jì)無(wú)限滾動(dòng)下拉加載，實(shí)踐高性能頁(yè)面真諦

    摘要：論壇上有過(guò)這么一篇熱門文章，它從角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。無(wú)限滾動(dòng)加載背后的技術(shù)挑戰(zhàn)其實(shí)比想象中要多不少。整體思路和方案設(shè)計(jì)我們要實(shí)現(xiàn)的頁(yè)面樣例如圖，它能夠做到無(wú)限下拉加載內(nèi)容。 UX Planet論壇上有過(guò)這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。 無(wú)限滾動(dòng)加載在互聯(lián)網(wǎng)上到處都有應(yīng)用：豆瓣...

    novo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<