2.原生js實現圖片懶載入

網上查了很多圖片懶載入的內容, 但基本上都是jQuery實現的, 沒有說清楚其原理, 所以研究了一下

多的不說, 上代碼, 看不明白的建議看下我的上一篇文章<1. 圖解瀏覽器和用戶設備的寬高等屬性>

HTML部分(圖片地址自己隨意)

<div>
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
</div>

JS部分

/*
思路 1.先將圖片地址存在"data-src"中
     2.圖片出現在頁面中就將"src"的地址改變
重點 判斷圖片是否出現在頁面中
        1.圖片距離頁面頂部的高度 + 屏幕高度
        2.頁面距離頂部被捲起來的高度
*/
//可操作部分(建議使用前測試)
    var m = 500;  //值越大頂部載入的越多
    var n = 0;  //值越大載入的越多

//選定img元素
var imgs = document.getElementsByTagName("img");
//判斷瀏覽器的高度
var win_h = window.innerHeight||document.documentElement.clientHeight;
//更換圖片
function replace(num){
    //不能直接將img的"src"等於"data-src",所以先獲取"data-src"的值,然後再添加給"src"
    imgs[num].setAttribute("src", imgs[num].getAttribute("data-src"));
}

//頁面滾動時判斷滾動到位置(出現在視圖視窗),進行載入
window.onscroll = function(){
    //頁面被捲起來的部分的高度
    var scroll_top = window.pageYOffset;
    //圖片距離頁面頂部的高度
    for (var i = 0; i < imgs.length; i++) {
        var c = imgs[i].offsetTop;
        //當圖片剛好在可視視窗之內時,替換內容
        if (c > (scroll_top - m) && c < (scroll_top + win_h - n)) {
            replace(i);
        }
    }
}
//開始頁面就要載入一部分圖片
window.onscroll();

雖然比較啰嗦, 但是內容詳細. 希望能幫到大家

最終效果如下: