懒加载是一种在页面加载时延迟加载一些非关键资源的技术，换句话说就是按需加载。对于图片来说，非关键通常意味着离屏。当我们在使用某些图片量比较大的网站时，如果向下滑动的速度过快，我们可以看到新出现在可视区域内的图片从占位图变成实际图片的过程。
我们之前看到的懒加载一般是这样的形式：
1.浏览一个网页，准备往下拖动滚动条，下方图片为占位图；
2.快速向下拖动，可以看到一个占位图片出现在视窗；
3.出现在视窗之后，占位图片被瞬间替换成最终的图片。
如果你之前不了解懒加载，那么简单概括一下懒加载的优势：可以减少页面加载的时间、页面的大小和降低系统资源的占用，这些对于性能都有显著地提升。
这里对于懒加载的方式就不在一一赘述，网上很多文档都有详细的教程，并且还有很多的第三方插件实现，但是免不了都要折腾一番。
而这里我们要介绍的是在2019年4月6日，Chrome官方公布，在Chrome75的新版本中给前端开发者带来的福利：Chrome原生支持图片懒加载。
在这篇文章中，我们可以看到使用方式很简单，就是给<img>标签增加loading属性即可：
<img src="logo.jpg" loading="lazy" alt="..." />
loading属性支持三个值：
-
lazy：懒加载； -
eager：不懒加载； -
auto：相当于不设置 loading 属性。
Chrome认为：“当用户滚动到附近时”的具体要做的事情应该留给浏览器。
用户可能更希望浏览器在要加载的图片或资源在即将进入视口之前，再进行提取。这样更有助于节省资源和提升用户打开多图页面的效率。
网友评论：
欢迎留言参加讨论...
网友评论