为网页图片加上loading=”lazy”延迟加载资源

HTML元素延迟加载属性——loading属性的值lazy允许浏览器选择性加载IMG元素，并根据用户的滚动操作，在其元素附近进行加载，在一定程度上起到节流作用。

那么，问题来了，哪些场景服务需要使用惰性图像加载技术呢？

答:当前页面图片元素太多，避免不必要的流量浪费；如果不需要加载大量图片，就不要使用，会影响用户体验~

用法:

<img src="load.jpg" loading="lazy" alt="优站网" />

你没有弄错。与普通的img标签相比，只有loading =“lazy”的属性，就这么简单。是我们今天想知道的主角。

可选值

loading="lazy"
loading="eager"

lazy 懒加载，即：延迟获取资源。

eager 立即加载，即：缺省值，你不加这个loading属性，它默认就是这个。