手寫圖片懶加載

介紹

當我將頁面滾動到有圖片的地方時再顯示圖片，不然就不顯示，這樣一來就能夠加快頁面的加載速度，同時也節省了流量，這種按需加載圖片的方式就稱之爲圖片的懶加載。

原理

給待加載的圖片一個默認的src，當圖片出如今可視區域後在把真正的src賦值給該圖片，從下圖能夠看出，判斷圖片是否進入可視區域的邏輯就是圖片與瀏覽器頂端的距離是否小於可視區域高度加滾動區域高度，若小於，即進入可視區域，反之則沒有

實現

html和css部分，代碼以下

js代碼開始前須要瞭解一些API

可視區域高： document.body.clientHeight;
滾動區域高： document.body.scrollTop;
HTMLElement.offsetTop 爲只讀屬性，它返回當前元素相對於其 offsetParent 元素的頂部的距離
具體實現的js代碼以下：

//n用來避免重複給image賦值src
let n = 0;
//獲取全部image元素
const images = document.querySelectorAll('img');
//全部image元素的長度
const num = images.length;
//懶記載實現
function lazyLoad() {
    //獲取可視區域高度
    const clientHeight = document.body.clientHeight;
    //獲取滾動區域高度
    const scrollTop = document.body.scrollTop;
    // 循環全部image元素, inde爲n, 不用每次都從0開始，已經循環過的不須要從新循環，提升運行效率
    for (let index = n; index < num; index++) {
        //當前image
        const img = images[index];
        //獲取當前image到瀏覽器頂部的距離，而不是到當前窗口的頂部的距離
        const offsetTop = img.offsetTop;
        //判斷是否在可視區域內
        if (offsetTop < clientHeight + scrollTop) {
            //判斷是否已經加載過
            if (img.getAttribute('src') === './image/loading.gif') {
            //加載真正的src
                img.src = img.getAttribute('data-src');
            }
            // n++
            n += 1;
        }
    }
}
// 先運行一次
lazyLoad();
//將懶加載函數賦值給瀏覽器的onscroll函數，滾動即執行函數
window.onscroll = lazyLoad;

初始加載，初始狀態兩個圖片在可視區域內，因此初始加載兩個圖片

開始滾動，動圖以下