前期步驟和首屏幕懶加載的步驟類似。以下分析的是不同的地方。

延遲加載.png

顯然，需要用window.onscroll去監(jiān)聽事件。但是有一個注意點(diǎn)，當(dāng)滿足A<B的條件后，不管圖片是否加載成功（不成功是因?yàn)閳D片地址錯誤導(dǎo)致無法加載），此時window.onscroll應(yīng)該不再去監(jiān)聽滾動事件了。

    var banner = document.querySelector('.banner');
    var imgFir = banner.getElementsByTagName('img')[0];

    window.onscroll = function () {
        if (banner.isLoad) { // 已經(jīng)加載過了
            return; // 就不再執(zhí)行了
        }
        var A = banner.offsetHeight + utils.offset(banner).top;
        var B = utils.win('clientHeight') + utils.win('scrollTop');

        if (A < B) {
            // 當(dāng)條件，加載真實(shí)的圖片，第一次加載完成后，再讓頁面繼續(xù)滾動的過程中，
            // A<B的條件一直成立，又重新的執(zhí)行了下面的操作，導(dǎo)致了重復(fù)給一個容器中的圖片進(jìn)行加載
            var oImg = new Image();
            oImg.src = imgFir.getAttribute('trueImg');
            oImg.onload = function () {
                console.log('ok');
                imgFir.src = oImg.src;
                imgFir.style.display = 'block';
                oImg = null;
            }
            banner.isLoad = true; // -> 設(shè)置一個自定義屬性，告訴瀏覽器已經(jīng)把圖片加載完了
            // 不管是否正常加載，只要處理過一次，以后都不再處理了
        }
    }