Add srcset support

Using the recommended markup (http://www.filamentgroup.com/lab/to-picturefill.html) for <img> with srcset while using picturefill seems to break imagesLoaded on browsers with native support for srcset. Let’s say I have an image like

<img srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1600.jpg 1600w"
>

We don’t use src here to avoid loading two images. Then we use use picturefill for browsers that don’t support srcset natively.

In both browsers with and without native support (thanks to picturefill) the right image is loaded, but imagesLoaded reports the image broken on browsers with native support (resulting in not being able to fade the image in smoothly when loaded)

Check out this reduced test case on latest Firefox (v.35: working) and Chrome (v.40: broken): http://codepen.io/superstructure-net/pen/EaWvZv/

Any ideas? Thx!

[DaAwesomeP]

Is it a known bug that there is a side-affect where the browser will end up loading two images?

I am seeing an issue where the browser loads the srcset image and then a little later imagesLoaded loads the fallback image. In many cases the fallback image is much larger since it is not size-selected by the browser.

[tiagogon]

+1… imagesloaded also doesn’t work here with “srcset”