html - 即使启用了标志， native 延迟加载(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 中延迟加载。

希望这有帮助!