@程序员，一文掌握 Web 应用中的图片优化技巧！(11)_：@程序员

要注意，使用这项特性进行图片懒加载时，记得先进行兼容性处理，对不支持这项属性的浏览器，转而使用Java来实现，比如上面说到的IntersectionObserver：

if( "loading"inHTMLImageElement.prototype) {

// 没毛病

} else{

// .....

}

还可以做到锦上添花！

以上介绍的两种方式，其实最终实现的效果是相似的，但这里还有个问题，当网速慢的时候，图片还没加载完之前，用户会看到一段空白的时间，在这段空白时间，就算是渐进式图片也无法发挥它的作用，我们需要更友好的展示方式来弥补这段空白。有一种方法简单粗暴，那就是用一张占位图来顶替，这张占位图被加载过一次后，即可从缓存中取出，无须重新加载，但这种图片会显得有些千篇一律，并不能很好地做到preview的效果。

这里我向大家介绍另一种占位图做法——CSS渐变色背景，原理很简单，当img标签的图片还没加载出来，我们可以为其设置背景色，比如：