原生懒加载图片回流(loading='"lazy")

Question

尝试在 img 标签上使用新的 loading="lazy" 属性时，出现以下错误：

[Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323

在网上看的时候发现下面的link指定添加width height img 的属性通过在屏幕上绘制占位符来帮助浏览器避免回流：

https://web.dev/native-lazy-loading#image-loading

我的问题是，现在很难对图像的 width 和 height 进行硬编码，如果我用我的风格 sheet 覆盖它们，如下所示，我还能从避免回流中受益吗？

img {
   width: 100%;
   height: auto;
}

提前致谢萨米.

Answer 1

简短的回答是否定的...即使 'reflow' 行为严格依赖于浏览器的实现，假设对 DOM 的几乎任何修改都会导致 'reflow'，尤其是当它涉及改变维度（元素取代其他元素）或 adding/removing 节点时。仍然建议添加高度和宽度属性，这些属性不仅会抑制 error/warning，还会作为后备。

最重要的是，如果所写 height/width 与最终样式匹配，您将避免在图像加载时出现难看的 'jump' 效果。

补充说明：'reflows' 应尽可能避免，但在您的情况下，图像加载只会发生一次，所以我会说没关系。

Answer 2

正如 Ernesto Stifano 所提到的，如果不指定图像的比例（即让浏览器知道图像的宽度和高度属性，则无法解决回流问题图片).

如果您不想指定确切的宽度和高度，则可以添加 intrinsicsize 属性（参见 here），但您仍然需要设置宽度和高度属性（例如使用接口 intrinsicsize="300 x 400"）。

这可以让您能够在 CSS 中设置 width: 100% 而不必担心不断设置 height: auto，这可能会有所帮助。

Answer 3

除了 Ernesto Stifano 之前提到的，目前关于 "intrinsicsize" 的发展或多或少与 "Compute img/video/canvas aspect ratio from width and height HTML attributes" 相比较 - 与 https://github.com/web-platform-tests/wpt/pull/18945 and https://github.com/WICG/intrinsicsize-attribute/issues/16

相比

原生懒加载图片回流(loading='"lazy")

Native lazy load image reflow (loading='"lazy")

javascript

css

google-chrome

lazy-loading