JavaScript怎么實現(xiàn)圖片懶加載

本篇內(nèi)容介紹了“JavaScript怎么實現(xiàn)圖片懶加載”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

實現(xiàn)思路

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

實現(xiàn)過程：

• 使用data-*自定義數(shù)據(jù)屬性給img標(biāo)簽新增一個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)過程中，涉及一些知識點，我們來快速回顧一下：

準(zhǔ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)圖片懶加載的最終目的，就是在恰當(dāng)?shù)臅r候使用data-src的值替換到src，加載真實的圖片。data-*定義的數(shù)據(jù)不僅可以在js中訪問，也可以在CSS中訪問，具體可參考：dataset

getBoundingClientRect()

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

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

throttle

由于我們會全局監(jiān)聽scroll滾動事件，如果每次滾動都觸發(fā)回調(diào)函數(shù)的話會造成不必要的計算成本，因此我們考慮使用節(jié)流來處理滾動事件。節(jié)流的具體細(xì)節(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滾動事件。

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

完整代碼

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

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標(biāo)簽的，渲染后就刪除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é)果

首屏展示：

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

滾動中展示：

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

滾動結(jié)束展示

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

“JavaScript怎么實現(xiàn)圖片懶加載”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！