当尝试在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的{{1}}属性通过在屏幕上绘制占位符来帮助浏览器避免重排：
https://web.dev/native-lazy-loading#image-loading
我的问题是，如今很难对图像的img和width进行硬编码了，如果我在样式表中用以下内容覆盖它们，我是否仍会受益避免回流？
height预先感谢 萨米人。
答案 0 :(得分：2)
简短的回答是……即使“重排”行为严格取决于浏览器的实现，也可以假设几乎所有对DOM的修改都会导致“重排”，这是非常有效的，尤其是在涉及更改尺寸时（替换其他元素的元素）或添加/删除节点。仍然建议添加height和width属性，这些属性不仅可以抑制错误/警告，而且还可以作为后备。
最重要的是，如果写入的高度/宽度与最终样式匹配，则在加载图像时，您将避免出现难看的“跳跃”效果。
补充说明：应尽可能避免“回流”，但在您的情况下，图像加载只会发生一次，所以我认为这没关系。
答案 1 :(得分：1)
正如Ernesto Stifano提到的，如果不指定图像的比例（即让浏览器知道图像的width 和 height属性），就无法解决回流问题。
但是，如果您不想指定确切的宽度和高度，则可以添加intrinsicsize属性（请参见here），但仍然需要设置width和height属性（使用接口intrinsicsize="300 x 400"，例如。）
这可以使您能够在CSS中设置width: 100%，而不必担心不断设置height: auto，这可能会有所帮助。
答案 2 :(得分：0)
除了Ernesto Stifano先前提到的内容外，当前有关“ intrinsicsize”的发展或多或少地涉及“从宽度和高度HTML属性计算img /视频/画布长宽比”-与https://github.com/web-platform-tests/wpt/pull/18945和{ {3}}