即使启用了标志，本机延迟加载（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">

Answer 1

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

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

深入研究之后，我发现了案件的“问题”。对于其他许多人可能是相同的。

事实证明，在加载标记为惰性的图片时，Chrome比Firefox更耐烦。这意味着它会更早地加载图像，因此图像出现在屏幕上时不会加载，而是早于屏幕加载。 另一方面，Firefox几乎在将要在屏幕上显示图像时加载图像。

我正在测试的图像在折叠以下，但是页面不是很长，因此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 像素。 您可以找到有关此 web.dev article

的更多信息

希望能帮到你?

Answer 3

我有一个最糟糕的原因，那就是它无法正常工作-我忘记添加width和height属性（相反，在我的无效代码中将它们添加为style） >

Answer 4

您可以尝试将src更改为data-src。它在Chrome浏览器中对我有效（即使它是受支持的浏览器）。

用<img src>>替换<img data-src>，以避免在不支持的浏览器中加载负载。

https://web.dev/native-lazy-loading/