原生延迟加载图片回流（loading='"lazy"）

Question

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

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

在网上查看时，我遇到了以下链接指定添加width 和height属性img有助于浏览器通过在屏幕上绘制占位符来避免回流：

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

我的问题是，如今对图像width和height图像进行硬编码非常罕见，如果我在样式表中使用以下内容覆盖这些内容，我是否仍能从避免回流中受益？

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

预先感谢萨米。

Answer 1

简短的回答是否定的......即使“回流”行为严格依赖于浏览器的实现，假设几乎对 DOM 的任何修改都会导致“回流”，特别是如果它涉及改变尺寸（元素置换其他元素）或添加/删除节点。仍然建议添加高度和宽度属性，不仅可以抑制错误/警告，还可以作为后备。

最重要的是，如果写入的高度/宽度与最终样式匹配，您将避免在图像加载时出现丑陋的“跳跃”效果。

附加说明：应尽可能避免“回流”，但在您的情况下，图像加载只会发生一次，所以我会说没关系。