本机延迟加载 (loading=lazy) 即使启用了标志也无法正常工作

Question

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

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

How it looks:

How it should look:

This is how its implemented:

<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

I had a similar issue when trying to implement it.

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.

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.

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

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

Hope this helps!

Answer 2

I had a similar problem, and after some research, I found the solution:

Just need to add width and height to the IMG tag, this is because the browser needs to know the size of the element before applying lazy loading.

Your code:

<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">

Your code after adding width and height:

<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="200px" height="200px">

Another alternative is using inline style:

<img class="has-border" src="..." style="object-fit:cover; height:200px; width:200px;" alt="..." loading="lazy">

Take into consideration I just randomly set the dimensions of the IMG tag to 200px. You can find more information on this web.dev article

hope it helps 👍

Answer 3

我最糟糕的原因是它不起作用 - 我忘记添加width和height属性（它们在我的损坏代码中被添加为style ）

Answer 4

optionally if you dont want to change your image size use this

Original code

<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">

With working Lazy load with no size restrictions

<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="auto" height="100%">

Answer 5

I have applied loading="lazy" to all of my images, included width="111px" height="111px" attributes for my <img> tags and even converted them into WebP format to reduce size, but my Firefox browser still keeps loading all images from the entire page. I don't touch or scroll after refresh. The indicator Dev tools says that it is - lazy-img .

I use Nodejs, vue and tailwind .

What could be wrong?

Answer 6

It could be because of cache .

If you see here lazy-img in the Network tab that means everything is fine.

You can test on a private window if you want just to double check.

Answer 7

You could try change src to data-src . It worked for me in Chrome (even though it is a supported browser).

Replace <img src> with <img data-src> > to avoid an eager load in unsupported browsers.

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

Answer 8

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