javascript - native 延迟加载图像回流(加载 ='"延迟”)

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 的修改都会导致“重排”，特别是如果它涉及改变尺寸(元素置换其他元素)或添加/删除节点。仍然建议添加高度和宽度属性，这不仅可以抑制错误/警告，还可以作为后备。

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

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