即使启用了标志，本机延迟加载 (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 属性（它们在我损坏的代码中被添加为 styles）

Answer 4

图像应定位为“相对”的样式。