本机延迟加载 (loading=lazy) 即使启用了标志也无法正常工作

Question

我目前正在尝试使用新的 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">

原文由 André Ramon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在尝试实施时遇到了类似的问题。

我默认使用 Chrome，但它无法正常工作。当我在 Firefox 中测试它时，它确实有效。这让我认为这是一个浏览器问题。

在深入挖掘之后，我发现了我的案例的“问题”。对于许多其他人来说可能是一样的。

事实证明，在加载标记为懒惰的图像时， Chrome 比 Firefox 更不耐烦。这意味着它加载图像的时间要早得多，因此当图像出现在屏幕上时不会加载图像，但会比这更早。另一方面，Firefox 几乎在图像即将显示在屏幕上时加载图像。

我正在测试的图像在首屏下方，但页面不是很长，所以 Chrome 无论如何都会加载图像。

当我在一篇更长的文章中尝试它时，文章深处的图像也确实在 Chrome 中延迟加载。

希望这可以帮助！

原文由 J0ANMM 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我遇到了类似的问题，经过一番研究，我找到了解决方案：

只需要在 IMG 标签中加上width和height，这是因为浏览器在应用延迟加载之前需要知道元素的大小。

你的代码：

 <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 文章 中找到更多信息

希望有帮助👍

原文由 Jonathan Rangel Bernal 发布，翻译遵循 CC BY-SA 4.0 许可协议