思想总结：

想要把异步（延迟）加载的图片，都写成容器的背景图片。然后对该容器添加一个特殊的class，而该class的样式是设置成背景为“无”。

当页面滚动时，想要延迟加载图片的容器靠近屏幕还未进入屏幕范围时删除该class，这是之前被覆盖的样式会开始起作用，将原本有的背景图片进行加载。以达到延迟加载的目的，从而提高多图片页面的加载体验。

HTML结构示例：

上面描述中的class也可以换成某个属性，而道理是一样的：

<div class="start-frame" data-lazy-image></div>

CSS样式：

.start-frame {
background: url(images/hero-start.jpg) center center / cover no-repeat;
}

[data-lazy-image] {
	background: none !important;
	mask-image: none !important;
}

判断相关容器即将进入屏幕范围

假设离屏幕还有500px时触发，既加载背景图片。

判断函数：

$.fn.isNearViewport = function() {
    var $sensitive = 500;
    var elementTop = $(this).offset().top - $sensitive;
    if (elementTop < 0) {
        elementTop = 0;
    }
    var elementBottom = elementTop + $(this).outerHeight() + $sensitive * 2;
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
}; 

判断方式：

$(window).on('load scroll', function() {
	$('[data-lazy-image]').each(function() {
		if ($(this).isNearViewport()) {
			$(this).removeAttr('data-lazy-image');
		}
	});
});