手機端圖片懶加載

圖片懶加載是手機內嵌h5打開網頁速度的優化方式之一，今天我就接受如何用最少的代碼解決手機端的圖片懶加載問題

由於公司使用的h5都是vue作的，可是其餘框架使用方式是同樣的

當後臺數據相應後，通常咱們會在html這麼操做

<div class="image" v-for="item in artsToysProducts.list">
    <img :data-src="item.logoUrl" class="text" />
</div>

此時咱們並無真正的加載圖片資源，而是用一個data-src來保存該圖片標籤未來也要加載的圖片資源地址，最關鍵的是咱們如何知道圖片進入可視區域

/**
 * 懶加載圖片，在圖片進入可視區域才加載，對於圖片不少的h5頁面較爲友好
 * demo在 activity/mainCenter
 */
var lazyLoad;
if( window.IntersectionObserver && /(iPhone)/.test(navigator.userAgent) ){//安卓手機對IntersectionObserve兼容不友好，因此咱們針對安卓採用監聽scroll
    lazyLoad = function ( element ) {
        const io = new IntersectionObserver(callback)// 實例化 默認基於當前視窗})  

        // 將圖片的真實url設置爲data-src src屬性爲佔位圖 元素可見時候替換src

        function callback(entries){  
            entries.forEach((item) => { // 遍歷entries數組
                if(item.isIntersecting){ // 當前元素可見
                    item.target.src = item.target.dataset.src  // 替換src
                    io.unobserve(item.target)  // 中止觀察當前元素 避免不可見時候再次調用callback函數
                }   
            })
            }
        setTimeout(()=>{
            let imgs = document.querySelectorAll( element )
            imgs.forEach((item)=>{  // io.observe接受一個DOM元素，添加多個監聽 使用forEach
                io.observe(item)
            })
        },200)
    }
    
}else{
    lazyLoad = function ( element ){
        var getTop = function (e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;  
        }
　　　　　//判斷是否進入可視區域
        var isInSight = function (el) {
            const bound = el.getBoundingClientRect();
            const clientHeight = window.innerHeight;
            //若是隻考慮向下滾動加載
            //const clientWidth = window.innerWeight;
            return bound.top <= clientHeight + 0; 
        }
        var H = window.innerHeight;
        var S = document.documentElement.scrollTop || document.body.scrollTop;
        var lazyLoadImg = function (imgs) {
            var H = window.innerHeight;
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if( imgs[i]['isLoad'] ) {//若是該圖片已經加載就跳過
                    continue;
                }
                //兼容處理，getBoundingClientRect的性能更好，但不保證較低的瀏覽器支持
                if( imgs[i].getBoundingClientRect  ){
                    if( isInSight( imgs[i] ) ){
                        imgs[i].src = imgs[i].getAttribute('data-src');
                        imgs[i]['isLoad'] = true;
                    }
                }
　　　　　　　　　　//不支持getBoundingClientRect的咱們判斷滾動條距離加上但是區域是否大於當前圖片距離文檔頂部距離
　　　　　　　　　　else if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                    imgs[i]['isLoad'] = true;
                }
            }
        }
    
        setTimeout( ( )=>{
            let imgs = document.querySelectorAll( element )
            window.onload = window.onscroll = function () {
                lazyLoadImg(imgs);
            }
            lazyLoadImg(imgs);
        },200)
    }
}

export default lazyLoad;

 

到此咱們寫好了監聽圖片進入但是區域的函數，接下來就是須要的頁面調用該方法了

import lazyLoad from "../../utils/lazyLoad";

//vue頁面數據相應後執行
this.$nextTick(function() {
        lazyLoad("[data-src]");
});

到此爲止，在加載頁面時候，只會在家在視圖區域的圖片資源，大大減小了http請求的數量，保證網頁的打開速度，以後用戶滾動纔會不斷在家進入視圖的圖片資源，主要是保證了首屏加載的速度