为什么加载属性在 chrome 中不起作用？答案

【问题标题】：Why loading attribute is not working in chrome?为什么加载属性在 chrome 中不起作用？
【发布时间】：2020-02-21 16:51:54
【问题描述】：

我已经用原生 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" />

【问题讨论】：

100% 确定，您能否检查在控制台中运行'loading' in HTMLImageElement.prototype 是否返回true？
loading' in HTMLImageElement.prototype 为我返回 true @CodyMacPixelface 但 loading="lazy" 无效。 Lighthouse 报告说它也没有被添加
这里也一样。 Opera 67.0.3575.97 (WebKit)。
在这里查看可能的答案：stackoverflow.com/a/61867237/5802289

标签： html google-chrome lazy-loading

【解决方案1】：

前段时间我回答了一个相关问题：

经过一些研究，我发现我的图像中遗漏了一些东西。 图片应包含尺寸属性

这里提到：https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes

虽然没有必要，但希望或期望在图像上指定尺寸属性，因为如果没有指定尺寸，布局可能会发生变化。导致意外行为。

浏览器需要知道图片的尺寸，以便在页面上为它们保留足够的空间。

【讨论】：