Imagesloaded v5 triggers loading of largest image when using srcset

[arjhun]

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]

[arjhun]

<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]

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

[fabianjaehnke]

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

[alexvanniel]

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.

[mjsarfatti]

Apparently a naïve currentSrc check (what imagesloaded does) is not reliable:

https://stackoverflow.com/questions/61645992/in-chrome-the-currentsrc-of-an-img-element-is-sometimes-empty-how-can-i-prevent

[splitmango-duy]

Apparently a naïve currentSrc check (what imagesloaded does) is not reliable:

https://stackoverflow.com/questions/61645992/in-chrome-the-currentsrc-of-an-img-element-is-sometimes-empty-how-can-i-prevent

Thank you for this reference, now that totally makes sense!