本机延迟加载(loading=lazy)即使启用标志也不能工作。

Question

我目前正在尝试使用新的loading=“懒惰”属性更新我的网站，如下所示：https://web.dev/native-lazy-loading

从视频中可以看到，一切都像预期的那样工作，但与我的铬瀑布图相比，它没有。

How it：

​

应该是什么样子：

​

​

它是如何执行的：

<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">

Answer 1

当我试图实现它时，我也遇到了类似的问题。

默认情况下，我使用Chrome，但它不起作用。当我在Firefox上测试它时，它确实起了作用。这让我觉得这是浏览器的问题。

在深入挖掘之后，我发现了我的案子的“问题”。对其他许多人来说，可能也是如此。

事实证明，当加载标记为懒惰的图片时，Chrome比火狐更加不耐烦。这意味着它加载图像的时间要早得多，所以当图像出现在屏幕上时，它不会被加载，但会更早加载。火狐，在另一边，正在加载的图像，几乎是当他们即将显示在屏幕上。

我正在测试的图像在折叠下面，但页面并不长，所以Chrome无论如何都在加载图像。

当我在一篇长得多的文章中尝试时，文章深处的图像也在Chrome中懒洋洋地加载。

希望这能有所帮助！

Answer 2

我遇到了一个类似的问题，经过一些研究，我找到了解决办法：

只需要向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标记的维度设置为200 to。您可以找到有关此web.dev文章的更多信息。

希望它能帮上忙

Answer 3

我最糟糕的原因是它没有工作-我忘记添加width和height属性(相反，它们是以style的形式添加在我破碎的代码中)