image - 为什么不总是使用本机延迟加载（图像属性加载=“lazy”）？

Question

我试图了解相对较新的 img 属性“正在加载”。

我知道如果 img 具有属性 loading="lazy" 那么它会告诉支持该属性的浏览器，它可以在接近视口时加载。

那么为什么不总是设置 loading="lazy" 呢？那些立即出现在屏幕上的图像无论如何都会被渲染，因为它们已经在视口内。因此，在这种情况下，基本上 loading="lazy" 无论如何都会被忽略。

我还在这个演示https://mathiasbynens.be/demo/img-loading-lazy中看到 dom 顶部的图片设置了 loading="lazy" 属性。

我从上面得到了链接：https ://web.dev/native-lazy-loading/

提前致谢 ：）

标签： imageloadnativelazy-evaluation

Answer 1

您应该避免loading=lazy对第一个可见视口中的任何图像进行设置。

来源： https ://web.dev/browser-level-image-lazy-loading/#avoid-lazy-loading-images-that-are-in-the-first-visible-viewport

简而言之，如果图像没有延迟加载，浏览器可以立即开始获取资源。惰性图像需要等到浏览器渲染管道的布局阶段，才能确定图像是否在视口中。

不必要的添加loading=lazy可能会增加少量延迟，直到您的网页完全呈现。