图片懒加载-2(单张图片懒加载)

前期步骤和首屏幕懒加载的步骤类似。以下分析的是不同的地方。

显然，需要用window.onscroll去监听事件。但是有一个注意点，当满足A<B的条件后，不管图片是否加载成功（不成功是因为图片地址错误导致无法加载），此时window.onscroll应该不再去监听滚动事件了。

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

    window.onscroll = function () {
        if (banner.isLoad) { // 已经加载过了
            return; // 就不再执行了
        }
        var A = banner.offsetHeight + utils.offset(banner).top;
        var B = utils.win('clientHeight') + utils.win('scrollTop');

        if (A < B) {
            // 当条件，加载真实的图片，第一次加载完成后，再让页面继续滚动的过程中，
            // A<B的条件一直成立，又重新的执行了下面的操作，导致了重复给一个容器中的图片进行加载
            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; // -> 设置一个自定义属性，告诉浏览器已经把图片加载完了
            // 不管是否正常加载，只要处理过一次，以后都不再处理了
        }
    }