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

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

Chrome的黑科技——loading属性

从新版本Chrome(76)开始，已经默认支持一种新的html属性——loading，它包含三种取值：auto、lazy和eager(之前有文章说是lazyload属性，后来chrome的工程师已经将其确定为loading属性，原因是lazyload语义不够明确)，我们看看这三种属性有什么不同：

auto：让浏览器自动决定是否进行懒加载，这其中的机制尚不明确。lazy：明确地让浏览器对此图片进行懒加载，即当用户滚动到图片附近时才进行加载，但目前没有具体说明这个“附近”具体是多近。eager：让浏览器立刻加载此图片，也不是此篇文章关注的功能。我们可以通过Chrome的开发工具看看这个demo中的图片加载方式，我们把上一个demo中的JS脚本都删掉了，只用了loading=lazy这个属性。接着，勾选工具栏中的Disabled Cache后仔细观察Network一栏，细心的人应该会发现，一张图片被分为了两次去请求！第一次的状态码是206，第二次的状态码才是200，如图所示：