前期步骤和首屏幕懒加载的步骤类似。以下分析的是不同的地方。
延迟加载.png
显然，需要用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; // -> 设置一个自定义属性，告诉浏览器已经把图片加载完了
// 不管是否正常加载，只要处理过一次，以后都不再处理了
}
}
