即使启用了标志，本机延迟加载(loading = lazy)也不起作用 [英] Native lazy-loading (loading=lazy) not working even with flags enabled

问题描述

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

I am currently trying to update my Website using the new loading="lazy" attribute as shown here: https://web.dev/native-lazy-loading

从视频中可以看到，一切都按预期进行，但与我在chrome中的瀑布图相比，却没有.

As seen in the video, everything works as expected, but compared with my waterfall diagram in chrome, it doesn't.

外观:

外观如何:

这是其实现方式:

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

推荐答案

在尝试实现该问题时，我遇到了类似的问题.

I had a similar issue when trying to implement it.

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

I use Chrome by default and it was not working. When I tested it in Firefox, it did work. That made me think it was a browser problem.

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

After digging in a bit more, I found out the "problem" for my case. It might be the same probably for many others.

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

It turns out Chrome is more impatient than Firefox when loading images tagged as lazy. That means it loads the images much earlier, so an image will not be loaded when it appears at the screen but earlier than that. Firefox, on the other side, is loading the images almost when they are about to be shown at the screen.

我正在测试的图像在折叠以下，但是页面不是很长，因此Chrome仍在加载图像.

The images I was testing were below the fold, but the page was not very long, so Chrome was loading the images anyway.

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

When I tried it in a much longer article, the images that were deep down the article did load lazily in Chrome as well.

希望这会有所帮助！

这篇关于即使启用了标志，本机延迟加载(loading = lazy)也不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！