尝试在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;
}
提前致谢
萨米
最佳答案
简短的回答是没有...即使“重排”行为严格取决于浏览器的实现，也可以假设几乎所有对DOM的修改都会导致“重排”，这是非常有效的，尤其是在涉及更改尺寸(元素置换)的情况下其他元素)或添加/删除节点。仍然建议添加height和width属性，这些属性不仅可以抑制错误/警告，而且还可以作为后备。
最重要的是，如果写入的高度/宽度与最终样式匹配，则在加载图像时，您将避免难看的“跳跃”效果。
补充说明:应尽可能避免“重排”，但在您的情况下，图像加载只会发生一次，所以我会说这没关系。