圖片懶加載，往往作為減少首頁白屏時間的一個解決方案而出現。直觀的來說，就是不要直接加載所有圖片，而是滿足一定條件后才加載，也就是”惰性加載“。實現圖片懶加載的方式有很多，如果要簡單點那就直接使用第三方插件：vue-lazyload，如果想探究一下別人的插件是怎么實現圖片懶加載的，那么可以看看本文是如何實現的。

實現思路

實現圖片懶加載我們需要先明白具體的場景，一般來說，我們會在首屏先加載幾張圖片，其他的圖片則先不加載，在頁面滾動時，圖片快出現在視窗中的時候才來加載圖片。為什么要這么實現呢，因為對于圖片很多的場景，如果一次性加載出所有的圖片，可能會導致頁面白屏時間比較長，特別是圖片比較大的時候。

實現過程：

使用data-*自定義數據屬性給img標簽新增一個data-src屬性
全局監(jiān)聽滾動事件，使用節(jié)流處理回調函數
在回調函數中，判斷圖片是否已經出現在可視區(qū)域，如果已經出現在可視區(qū)域，則加載該圖片
頁面初始化的時候執(zhí)行一下回調函數，保證首屏有圖片顯示

在這個實現過程中，涉及一些知識點，我們來快速回顧一下：

準備知識

data-*

data-*是可自定義數據屬性的屬性，可用在所有的HTML元素上面，嵌入自定義的數據內容。這些自定義的數據可以在HTMMLElement.dataset中被訪問到，例如：

<img id="img" src="loading.gif" data-src="xxx.png" data-name="img" />
// 訪問dataset
const img = document.getElementById('img')
console.log(img.dataset.src); // xxx.png
console.log(img.dataset.name); // img

我們實現圖片懶加載的最終目的，就是在恰當的時候使用data-src的值替換到src，加載真實的圖片。data-*定義的數據不僅可以在js中訪問，也可以在CSS中訪問，具體可參考：dataset

getBoundingClientRect()

Element.getBoundingClientRect()方法會返回一個DOMRect對象，其包含了當前元素的大小，以及相對于視窗的位置信息。聽名字可能會有點迷糊，但是結合圖來看就比較好理解了：

DOMRect對象中的width和height是包含了元素的padding和border-width，其位置信息指的是包含元素的最小矩形的每條邊距離視窗原點(0,0)的位置。

throttle

由于我們會全局監(jiān)聽scroll滾動事件，如果每次滾動都觸發(fā)回調函數的話會造成不必要的計算成本，因此我們考慮使用節(jié)流來處理滾動事件。節(jié)流的具體細節(jié)就不在此重復，我們先簡單實現一個節(jié)流：

function throttle(fn, delay = 200) {
    let timer = null;
    return function() {
        if (timer) return;
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
        }, delay);
    }
}

window.innerHeight

有幾個很相似的”height“，我們就簡單都梳理一下：

window.innerHeight：瀏覽器可視區(qū)域的高度；如果有水平滾動條，也會包含滾動條高度
window.outerHeight：獲取整個瀏覽器的高度
Element.scrollHeight：元素內容的高度，包括由于溢出導致隱藏的內容高度
Element.clientHeight：元素內部的高度，包含內邊距，但不包括水平滾動條、邊框、外邊距

這里我們使用innerHeight即可，因為我們是在window對象上監(jiān)聽scroll滾動事件。

準備工作已經完畢，接下來就直接上手代碼。

完整代碼

代碼中都有相應的注釋，在了解上面的準備知識后，代碼就挺簡單的了：

js部分

// 使用for循環(huán)批量創(chuàng)建img，html中可沒有v-for可以使用
for (let index = 0; index < 10; index++) {
    let img = document.createElement("img");
    img.src = "./loading.gif";
    img.dataset.src = "./dog.jfif"; // 由于我們是通過js創(chuàng)建的，因此就無法直接使用data-*，如果是在html上面，需要添加此屬性
    document.body.appendChild(img);
    img = null;
}
// 節(jié)流
function throttle(fn, delay = 200) {
    let timer = null;
    return function () {
        if (timer) return;
            timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
        }, delay);
    };
}
// 懶加載-回調函數
function lazyLoad() {
    const imgs = document.querySelectorAll('img[data-src]');
    if (!imgs.length) return;
    imgs.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < window.innerHeight) {
        img.src = img.dataset.src;
        img.removeAttribute('data-src'); // 我們是通過img[data-src]查找所有img標簽的，渲染后就刪除data-src可減少forEach循環(huán)的計算成本
        }
    })
}
// 全局監(jiān)聽scroll滾動事件
window.addEventListener('scroll', throttle(() => {
    lazyLoad();
}, 100));
// 初始化的時候執(zhí)行一下加載圖片的函數
lazyLoad();

CSS部分

<style>
body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
img {
    margin: 10px auto;
    width: 600px;
    height: 400px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #070707;
}
</style>