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

使用强大的IntersectionObserver

IntersectionObserver提供给我们一项能力：可以用来监听元素是否进入了设备的可视区域之内，这意味着我们等待图片元素进入可视区域后，再决定是否加载它，毕竟用户没看到图片前，根本不关心它是否已经加载了。这是Chrome51率先提出和支持的API，而在2019年的今天，各大浏览器对它的支持度已经有所改善(除了IE，全线崩~)：

废话不多说，上代码。首先，假设我们有一个图片列表，它们的src属性我们暂不设置，而用data-src来替代：

这样会导致图片无法加载，这当然不是我们的目的，我们想做的是，当IntersectionObserver监听到图片元素进入可视区域时，将data-src"还给"src属性，这样我们就可以实现图片加载了：

运行代码并观察控制台的Network，会发现图片随着可视区域的移动而加载，我们的目的达到了。

PS：额外介绍一个vue的图片懒加载组件vue-view-lazy，也是基于IntersectionObserver实现的。

Chrome的黑科技——loading属性