性能更優越的小程序圖片懶加載方式

AJie 發布于2019-08-22 18:45 / 1800人閱讀

摘要：相交比例相交區域占參照區域的比例。閾值相交比例如果達到閾值，則會觸發監聽器的回調函數。

意義

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

實現方式

傳統H5的懶加載方式都是通過監聽頁面的scroll事件來實現的，結合viewport的高度來判斷。
小程序也類似，通過監聽頁面onPageScroll事件獲取當前滾動的數據，結合getSystemInfo獲取設備信息來判斷。由于scroll事件密集發生，計算量很大，經常會造成FPS降低、頁面卡頓等問題。
這里說的是通過另外一種方式來實現

createIntersectionObserver

小程序基礎庫 1.9.3 開始支持，了解下

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

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

參照節點：監聽的參照節點，取它的布局區域作為參照區域。如果有多個參照節點，則會取它們布局區域的交集作為參照區域。頁面顯示區域也可作為參照區域之一。

目標節點：監聽的目標，默認只能是一個節點（使用 selectAll 選項時，可以同時監聽多個節點）。

相交區域：目標節點的布局區域與參照區域的相交區域。

相交比例：相交區域占參照區域的比例。

閾值：相交比例如果達到閾值，則會觸發監聽器的回調函數。閾值可以有多個。

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

//index.js
//獲取應用實例
const app = getApp()

let lazyload;

Page({
    data: {
        classNote: "item-",                    //循環節點前綴
        count: 0,                              //總共加載到多少張
        img: []                                //圖片列表
    },
    onReady: function () {
        //可以先初始化首屏需要展示的圖片
        that.setData({
            count: 5
        })
        //開始監聽節點，注意需要在onReady才能監聽，此時節點才渲染
        lazyload.observe();
    },
    viewPort: function () {
        const that = this;
        var intersectionObserver = wx.createIntersectionObserver();
        //這里bottom：100，是指顯示區域以下 100px 時，就會觸發回調函數。
        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點需要注意的

監聽的節點需要先渲染，也就是說監聽這個動作需要在onReady的時候

上述示例監聽是依賴循環節點的class，最少需要先渲染一個節點才能監聽

每次監聽完一個循環節點后，結束監聽，然后繼續監聽下一個節點

結果

無論怎么快速滾動，FPS都能保持在60

總結

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

GPU云服務器云服務器 js圖片懶加載 js實現數據的懶加載圖片懶加載懶加載異常

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96160.html

實例感受-es6的常用語法和優越性

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

fsmStudy 2019-08-21 17:36 評論0 收藏0
前端工程師面試必備（持續更新中）

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

jubincn 2019-05-22 14:42 評論0 收藏0
設計無限滾動下拉加載，實踐高性能頁面真諦

摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設計實踐。無限滾動加載背后的技術挑戰其實比想象中要多不少。整體思路和方案設計我們要實現的頁面樣例如圖，它能夠做到無限下拉加載內容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設計實踐。無限滾動加載在互聯網上到處都有應用：豆瓣...

Hanks10100 2019-08-20 14:39 評論0 收藏0
設計無限滾動下拉加載，實踐高性能頁面真諦

摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設計實踐。無限滾動加載背后的技術挑戰其實比想象中要多不少。整體思路和方案設計我們要實現的頁面樣例如圖，它能夠做到無限下拉加載內容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設計實踐。無限滾動加載在互聯網上到處都有應用：豆瓣...

novo 2019-08-01 16:25 評論0 收藏0