即使启用了标志，本机延迟加载（loading=lazy）也不起作用
And*_*mon 12 html google-chrome lazy-loading image
我目前正在尝试使用新的 loading="lazy" 属性更新我的网站，如下所示：https : //web.dev/native-lazy-loading
正如视频中所见，一切都按预期工作，但与我在 chrome 中的瀑布图相比，它没有。
它的外观：
它应该是什么样子：
这是它的实现方式：
<img class="has-border" src="https://andreramoncombucket.s3.amazonaws.com/static/assets/img/work/personal-website/pw_full.jpg" style="object-fit: cover;" alt="..." loading="lazy">
小智 27
我也遇到了类似的问题，经过一番研究，我找到了解决方案：
只需要在IMG标签中添加宽度和高度，这是因为浏览器在应用延迟加载之前需要知道元素的大小。
你的代码：
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">
添加宽度和高度后的代码：
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="200px" height="200px">
另一种选择是使用内联样式：
<img class="has-border" src="..." style="object-fit:cover; height:200px; width:200px;" alt="..." loading="lazy">
考虑到我只是随机将IMG标签的尺寸设置为 200px。您可以在这篇web.dev 文章中找到更多信息
希望能帮助到你
J0A*_*NMM 17
我在尝试实施时遇到了类似的问题。
我默认使用 Chrome，但它不起作用。当我在 Firefox 中测试它时，它确实有效。这让我认为这是浏览器的问题。
在深入挖掘之后，我发现了我的案例的“问题”。对于许多其他人来说，这可能是一样的。
事实证明，在加载标记为惰性的图像时，Chrome比 Firefox更不耐烦。这意味着它会更早地加载图像，因此当图像出现在屏幕上时不会加载图像，但会更早加载。另一方面，Firefox 几乎在图像即将显示在屏幕上时加载它们。
我正在测试的图像低于首屏，但页面不是很长，所以 Chrome 无论如何都在加载图像。
当我在一篇更长的文章中尝试它时，文章深处的图像也确实在 Chrome 中延迟加载。
希望这可以帮助！
- 根据我的实验，似乎 3200px 大约是 chrome 认为“低于首屏”的延迟加载目的。 (2认同)
- 其次，它看起来比固定像素距离稍微复杂一点 https://web.dev/native-lazy-loading/#load-in-distance-threshold (2认同)
小智 5
目前Firefox 中存在一个错误loading="lazy"：如果将属性放在属性后面，则该属性无效src。
修复方法很简单：将 attribute 放在attributeloading之前src。
工作示例：
<img
loading="lazy"
src=...
/>
以下内容在 Firefox 中不起作用 - 图像将立即加载（但在 Chrome 中有效）：
<img
src=...
loading="lazy"
/>