Adding img placeholder to picture tag causes lazy loading to fail.

[AbdellaouiSofiane]

I'm trying to use lozad with a picture tag and and img placeholder like described in documentation:

 <picture class="lozad">
  <source srcset="some-image.webp" type="image/webp"> 
  <source srcset="some-other-image.jpeg" type="image/jpeg">
  <img src="data:image/jpeg;base64,/some_lqip_in_base_64==">
 </picture

Without the img placeholder, it works fine, but adding an img tag actually causes all images to be loaded (even if not within viewport) like when not using lozad at all (except the picture tag gets data-loaded=true).

I'm using Chrome Version 92.0.4515.107 (64 bits) and I'm on Ubuntu 21.04.

Am I doing anything wrong here ?

[jpcarpenter]

+1 Encountering the same issue. It would be awesome to have this work properly.

[AbdellaouiSofiane]

Was able to make it work, just place the img element before the picture tag (don't put any img element inside).
For some reason it worked, you can try it.

[jpcarpenter]

@AbdellaouiSofiane nice catch! Adding that works when loading the page and scrolling to the image that has lozad enabled on it. However, if you load the page over the image that has lozad enabled on it, the <img> tag never gets appended to the <picture> tag, resulting in the placeholder showing instead. Not sure what's going on there. Maybe something to do with IntersectionObserver?

EDIT: From looking at the network tab, it actually looks like it's being loaded onto the page at some point, then being removed once the page has fully loaded. It may be something to do with my setup - not entirely sure. I'm using Nuxt/Vue, so it may be something to do with hydrating the app.

[saiballo]

Same problem here... no way to validate the html source without img tag inside picture. but if I add the img tag the script fails

[saiballo]

any suggestion?

[galetahub]

Try this one https://github.com/verlok/vanilla-lazyload
Works fine with picture + img, the setup script is almost the same