html - 为什么加载属性在 chrome 中不起作用?

标签 html google-chrome lazy-loading

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

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

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

相关问题:https://stackoverflow.com/a/64330480/10757314

关于html - 为什么加载属性在 chrome 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58556766/

相关文章:

html - 我怎样才能在响应中转换这个按钮?

jquery form .submit() 仅适用于 Chrome

javascript - 选择选项下拉菜单需要时间专门在 Chrome 中关闭

angular - Angular 延迟加载会减小包大小吗?

html - css3动画推另一个里

javascript - 设置选择元素的选定值

javascript - 如何将 Json 数据从 javaScript 发送到 Flask

Javascript OAuth 和 Opera 链接

java - 将重新加载的对象链接到其在 Hibernate 中的父对象

c# - Entity Framework Core - 延迟加载不适用于 Getters