我已经用原生 chrome loading="lazy"
属性替换了延迟加载,但它似乎不起作用。我使用的是 Chrome 76 最新版本。
我在 https://developers.google.com/speed/pagespeed/insights 中检查了我的页面速度它仍然显示延迟屏幕外图像!
不确定我到底错过了什么?
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
最佳答案
前段时间回答过一个相关问题:
经过一些研究后,我发现我的图像中遗漏了一些东西。 图片应包含维度属性
如此处所述:https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
虽然没有必要,但还是希望或期望在图像上指定尺寸属性,因为如果不指定尺寸,可能会发生布局偏移。导致意外行为。
浏览器需要知道图像的尺寸,以便在页面上为它们保留足够的空间。
关于html - 为什么加载属性在 chrome 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58556766/