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

【问题标题】：Why not use native lazy loading (image attribute loading="lazy") always?为什么不总是使用本机延迟加载（图像属性加载=“lazy”）？
【发布时间】：2020-06-07 06:09:29
【问题描述】：

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

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

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

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

上面的链接来自：https://web.dev/native-lazy-loading/

提前致谢:)

【问题讨论】：

标签： image load native lazy-evaluation

【解决方案1】：

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

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

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

不必要地添加loading=lazy 可能会在您的网页完全呈现之前增加少量延迟。

【讨论】：

【解决方案2】：

我能想到的不总是使用延迟加载的原因之一是网络可能会中断。在这种情况下，您希望在连接处于活动状态时尽可能多地下载，以便在连接断开时可以使用大部分页面。

【讨论】：

【解决方案3】：

这是对浏览器的一个提示，即图像可能不会立即有用/可见，它应该优先考虑其他资源。图片轮播中的第三张图片或出现在页面下方的图片是该属性何时有用的一些很好的例子。

Overly lazy implementations，例如 Firefox，在滚动到视图中之前不显示图像。这会导致浏览器在加载图像时显示一个白色区域。这不是理想的用户体验。另一方面，Chrome 在它们出现在屏幕上之前，loads images 3000–8000px 再次太急切了。

Chrome 不会加载延迟加载的图像，即使它们在后台打开的标签的视口中也是如此。这是由 Chromium 的 IntersectionObserver 的限制引起的，可能会在未来的版本中修复。

【讨论】：