JavaScript懶加載詳解

更新時(shí)間：2021年11月01日 15:34:00 作者：Nanchen_42

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁(yè)面數(shù)據(jù)懶加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

懶加載

顧名思義比較懶，不想全部加載出來(lái)，當(dāng)用戶(hù)什么時(shí)候想看我在加載后面的東西

概括：懶加載其實(shí)就是延時(shí)加載，即當(dāng)對(duì)象需要用到的時(shí)候再去加載。

實(shí)現(xiàn)原理：

首先你要有很多個(gè)第一張用來(lái)加載的圖片，加載完畢之后顯示后面所需的圖片

步驟實(shí)現(xiàn)：

1.加載load圖片
2.判斷哪些圖片要加載
3.隱形加載圖片
4.替換真圖片

CSS樣式：

    <style>
        img {
            width: 400px;
            height: 300px;
            display: block;
        }
        .row{
            width: 300px;
            height: 400px;
        }
    </style>

HTML部分：

  <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (92).jpeg"">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (1).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (2).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (19).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (23).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (33).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (37).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (38).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (39).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (40).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (41).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (42).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (43).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (44).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (45).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (46).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (47).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (48).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (49).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (50).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (51).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (52).jpg">
        <img  src="image/load.gif"alt="" data-original=" image/圖片 (53).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (54).jpg">

為什么有兩個(gè)路徑？因?yàn)橐粋€(gè)img中有一張真圖片和一張假圖片，我們得用先用假圖片進(jìn)行加載，然后用真圖片去替換，下圖中假圖片為左側(cè)，真圖片為右側(cè)

script部分：

    <script>
        let view = document.documentElement.clientHeight;//獲取瀏覽器窗口可視區(qū)的高度
        function fn1(){
            setTimeout(function lazyload() {    //添加一個(gè)定時(shí)器一秒鐘后開(kāi)始執(zhí)行
            let imgs = document.querySelectorAll('img');    // 獲取所有img標(biāo)簽
            // console.log(imgs);
            for (let item of imgs) {                // 使用for-of遍歷所有圖片
                // 顯示圖片出現(xiàn)在瀏覽器的位置
                let rect = item.getBoundingClientRect();    // 找到每一個(gè)圖片在可視區(qū)上的位置
                console.log(rect);
                if (rect.bottom >= 0 && rect.top < view) {    //給個(gè)if語(yǔ)句如果圖片的底部大于0并且小于這個(gè)瀏覽器的可視區(qū)域 ，就執(zhí)行以下操作
                    item.src = item.getAttribute('data-original')    // 獲取data-original的路徑傳給img
                }
            }
        },1000)
        }
        fn1();
        document.addEventListener('scroll',fn1)    //當(dāng)滾動(dòng)事件發(fā)生時(shí)就開(kāi)始執(zhí)行fn1函數(shù)里的任務(wù)
    </script>

為什么用for-of而不用for-in或者for循環(huán)？具體可以去參考ES6中for-of獲取的是什么

效果如下：

完整代碼：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懶加載</title>
    <style>
        img {
            width: 400px;
            height: 300px;
            display: block;
        }
        .row{
            width: 300px;
            height: 400px;
        }
    </style>
</head>
<body>
        <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (92).jpeg"">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (1).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (2).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (19).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (23).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (33).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (37).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (38).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (39).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (40).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (41).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (42).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (43).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (44).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (45).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (46).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (47).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (48).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (49).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (50).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (51).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (52).jpg">
        <img  src="image/load.gif"alt="" data-original=" image/圖片 (53).jpg">
        <img  src="image/load.gif" alt="" data-original="image/圖片 (54).jpg">
    <script>
        let view = document.documentElement.clientHeight;
        function fn1(){
            setTimeout(function lazyload() {
            let imgs = document.querySelectorAll('img');
            // console.log(imgs);
            for (let item of imgs) {
                // 顯示圖片出現(xiàn)在瀏覽器的位置
                let rect = item.getBoundingClientRect();
                console.log(rect);
                if (rect.bottom >= 0 && rect.top < view) {
                    item.src = item.getAttribute('data-original')
                }
            }
        },1000)
        }
        fn1();
        document.addEventListener('scroll',fn1)
    </script>
</body>
 
</html>

下面附上加載圖片，當(dāng)然了也可以自己找的（自己找的話(huà)我覺(jué)得挺麻煩的 —.—），如果其他圖片也“懶”的自己找的話(huà)可以私我我整理好發(fā)給你 ღ( ´･ᴗ･` )