圖片懶載入是手機內嵌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請求的數量，保證網頁的開啟速度，之後使用者滾動才會不斷在家進入檢視的圖片資源，主要是保證了首屏載入的速度