图片懒加载 loading="lazy"

img属性loading="lazy"延迟请求加载资源

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

懒加载、延迟加载亦或所谓的按需加载，通常在业务项目中，我们会考虑到此场景该如何处理？

所谓图片懒加载，在图片位置未至用户视窗范围或屏幕位置时不予请求加载资源，直至其附近位置方可请求加载。

那么什么情况下可以使用图片懒加载技术呢？

1、页面图片太多，导致用户首屏加载慢，从而影响用户体验

2、当前页面图片元素过多，避免不必要的流量浪费

<img src="product-desc.jpg" loading="lazy" alt="产品大图" />

其中元素属性loading就是今天所要了解的属性。

loading=“lazy”
loading=“eager”

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

eager 立即加载，即：默认状态。

字面意思我们也可以了解其作用。

起始加载会从当前滚动位置所加载，随着滚动方向而加载。若测试，可用Chrome76 版本测试