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

實現(xiàn)思路

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

實現(xiàn)過程：

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

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

準備知識

data-*

data-*是可自定義數(shù)據(jù)屬性的屬性，可用在所有的HTML元素上面，嵌入自定義的數(shù)據(jù)內(nèi)容。這些自定義的數(shù)據(jù)可以在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

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

getBoundingClientRect()

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

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

throttle

由于我們會全局監(jiān)聽scroll滾動事件，如果每次滾動都觸發(fā)回調(diào)函數(shù)的話會造成不必要的計算成本，因此我們考慮使用節(jié)流來處理滾動事件。節(jié)流的具體細節(jié)就不在此重復(fù)，我們先簡單實現(xiàn)一個節(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：元素內(nèi)容的高度，包括由于溢出導(dǎo)致隱藏的內(nèi)容高度
• Element.clientHeight：元素內(nèi)部的高度，包含內(nèi)邊距，但不包括水平滾動條、邊框、外邊距

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

準備工作已經(jīng)完畢，接下來就直接上手代碼。

完整代碼

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

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);
    };
}
// 懶加載-回調(diào)函數(shù)
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í)行一下加載圖片的函數(shù)
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>

運行結(jié)果

首屏展示：

首先我們會默認加載三張圖片，查看元素節(jié)點，這三張圖片的data-src都沒有，而另外沒有加載的圖片是有data-src的。

滾動中展示：

滾動時會觸發(fā)圖片加載的回調(diào)函數(shù)，DOM樹也會跟著改變

滾動結(jié)束展示

所有圖片都將只有src，沒有data-src。

總結(jié)

本文通過監(jiān)聽滾動事件，在圖片出現(xiàn)在可視區(qū)域前才加載真正的圖片，如果未出現(xiàn)則使用默認的loading圖片的方式實現(xiàn)了圖片懶加載。一般來說，loading圖片都會比較小，而實際的圖片會大很，因此使用loading圖片來代替是可以減少圖片渲染時間的。

到此這篇關(guān)于一文搞懂JavaScript如何實現(xiàn)圖片懶加載的文章就介紹到這了,更多相關(guān)JavaScript圖片懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論