Picture element has its image loaded before the users scrolls to it.

[Fb16455]

Hi.

I have a page with 6 images that are loaded using 5 <img> elements and 1 <picture> element. With the exception of the first image, all the other are lazy loaded using yall.js.

The images loaded in the s are lazy loaded correctly, but the image loaded in the picture element get loaded before the user scrolls to it.

Here's the page: https://lazyloadingtest.netlify.com/yall.html

If you open the network tab in devtools, you can see that images 1, 2 and 6 are loaded. As image 6 is at the bottom of the page, therefore outside the viewport, it should be hidden until the user reaches it in some way.

Why it's not waiting to load images inside only when it's necessary?

[verlok]

Hey @Fb16455 ,
have you tried https://github.com/verlok/lazyload ?
It does pretty much the same and it’s working zero bugs for years.

[nitindutta5]

Facing the same issue. @Fb16455 Were you able to solve it?