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

Imagesloaded v5 triggers loading of largest image when using srcset #306

Open
arjhun opened this issue Sep 23, 2022 · 5 comments
Open

Imagesloaded v5 triggers loading of largest image when using srcset #306

arjhun opened this issue Sep 23, 2022 · 5 comments

Comments

@arjhun
Copy link

arjhun commented Sep 23, 2022

Hi desandro! wordpress uses SRCSET attribute for responsive images. When I use imagesloaded It triggers the download of the largest image generating extra bandwidth. Am I doing something wrong? Is there a way of triggering imagesloaded on the size that the browser requests from the srcset? thanks!

edit:

I'm using imagesloaded@5

@arjhun
Copy link
Author

arjhun commented Sep 23, 2022

image

@arjhun
Copy link
Author

arjhun commented Sep 23, 2022

<a href="http://giver.local/lois_2018/wp-content/uploads/2020/09/pull.jpg" class="simplelightbox"> <img width="691" height="1000" alt="" data-srcset="http://giver.local/lois_2018/wp-content/uploads/2020/09/pull.jpg 691w, http://giver.local/lois_2018/wp-content/uploads/2020/09/pull-207x300.jpg 207w" data-src="http://giver.local/lois_2018/wp-content/uploads/2020/09/pull.jpg" data-sizes="(max-width: 691px) 100vw, 691px" class="attachment-post-thumbnail size-post-thumbnail wp-post-image lazyloaded" src="http://giver.local/lois_2018/wp-content/uploads/2020/09/pull.jpg" loading="lazy" sizes="(max-width: 691px) 100vw, 691px" srcset="http://giver.local/lois_2018/wp-content/uploads/2020/09/pull.jpg 691w, http://giver.local/lois_2018/wp-content/uploads/2020/09/pull-207x300.jpg 207w"><noscript><img width="691" height="1000" src="http://giver.local/lois_2018/wp-content/uploads/2020/09/pull.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://giver.local/lois_2018/wp-content/uploads/2020/09/pull.jpg 691w, http://giver.local/lois_2018/wp-content/uploads/2020/09/pull-207x300.jpg 207w" sizes="(max-width: 691px) 100vw, 691px" /></noscript> </a>

@arjhun arjhun changed the title Imagesloaded triggers loading of largest image when using srcset Imagesloaded v 5triggers loading of largest image when using srcset Sep 23, 2022
@arjhun arjhun changed the title Imagesloaded v 5triggers loading of largest image when using srcset Imagesloaded v5 triggers loading of largest image when using srcset Sep 23, 2022
@arjhun
Copy link
Author

arjhun commented Sep 23, 2022

Sorry I think this is a duplicate of #295 but for me srcset is not working.

@fabianjaehnke
Copy link

fabianjaehnke commented Jan 29, 2023

I had the same issue on localhost but not on a server

@alexvanniel
Copy link

alexvanniel commented Aug 30, 2023

A year late but I am still seeing multiple sources being loaded when using this plugin.
First the srcset is loaded and the events are triggered as soon as the image picked by the browser is doen loading, but then I also see that the image in the src attribute is loaded. The network inspection tool tells me that the imagesLoaded plugin is initiating the loading of the image. Now, I could ofcourse omit the src attribute but the idea was to have both src and srcset to make sure the markup is compatible. Do I need to remove the src attribute now to prevent triggering the loading of the additional image? Is there a workaround or a fix for this? In the other issue thatw as closed it states full support is added to v5 of the plugin but I am still seeing this behavior today with the latest version in use.

This is both remote and local servers by the way... no difference there in my case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants