search

desandro / imagesloaded

:camera: JavaScript is all like "You images done yet or what?"
https://imagesloaded.desandro.com
MIT License
8.88k stars 1.15k forks source link

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

Open arjhun opened 1 year ago

arjhun commented 1 year ago

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 commented 1 year ago

image

arjhun commented 1 year ago

<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 commented 1 year ago

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

fabianjaehnke commented 1 year ago

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

alexvanniel commented 10 months ago

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.