javascript - 本机延迟加载图像回流 (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

我的问题是，如今硬编码图像的 awidth和height图像非常罕见，如果我在样式表中使用以下内容覆盖这些内容，我仍然会从避免重排中受益吗？

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

在此先感谢萨米。

标签： javascriptcssgoogle-chromelazy-loading

Answer 1

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

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

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