Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
AbdellaouiSofiane opened this issue Aug 5, 2021 · 6 comments
Open

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

AbdellaouiSofiane opened this issue Aug 5, 2021 · 6 comments

Comments

@AbdellaouiSofiane
Copy link

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

</picture">
 <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
Copy link

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

@AbdellaouiSofiane
Copy link
Author

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
Copy link

jpcarpenter commented Sep 10, 2021 •
edited

@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
Copy link

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
Copy link

any suggestion?

@galetahub
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@galetahub @saiballo @jpcarpenter @AbdellaouiSofiane