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

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

延迟加载.png

显然，需要用window.onscroll去监听事件。但是有一个注意点，当满足A的条件后，不管图片是否加载成功（不成功是因为图片地址错误导致无法加载），此时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 设置一个自定义属性，告诉浏览器已经把图片加载完了
            // 不管是否正常加载，只要处理过一次，以后都不再处理了
        }
    }