为网页图片加上loading="lazy"延迟加载资源(懒加载)

那么问题来了，哪些场景业务需要用到图片懒加载技术呢？

答：当前页面图片元素过多，避免不必要的流量浪费；如果不是需要加载很多图片的话那还是不要用了，影响用户体验~

使用方法

<img src="load.jpg" loading="lazy" alt="Hello" />

你没看错，和普通的img标签相比，只多出了loading="lazy"这个属性，就是这么简单；它就是今天所要了解的主角。
可选值

loading="lazy"
loading="eager"

lazy 懒加载，即：延迟获取资源。
eager 立即加载，即：缺省值，你不加这个loading属性，它默认就是这个。