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

I have the worst reason it wasn't working - I forgot to add the width and height attributes (they were instead added as styles in my broken code)

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 👍

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!