Native lazy-loading (loading=lazy) not working even with flags enabled

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!