[SOLVED] When using picture, source and srcset how check which src was loaded? (img.src is empty)

When using picture, source and srcset how check which src was loaded? (img.src is empty)

I'm using the picture element with source's to choose which image to load. And while I can add a load listener, I cannot figure out which image was loaded as the img tag's src attribute and property are both empty, even when loaded!

<picture>
      <source srcset="images/test1.png" media="(min-width: 64em)">
      <source srcset="images/test2.png" media="(max-width: 63.99em)">

      <!-- This will alert an empty string "" -->
      <img srcset="images/test.png" alt="" onload="alert( this.src );">
</picture>

How do I determine which image was loaded?

Solution

In modern browsers that implement this, there appears to be a new property: currentSrc. In the image.onload, you can check for this. In older browsers, it will use src.

img.onload = function()
{
    //Old browser
    if ( typeof img.currentSrc === "undefined" ) console.log( img.src );

    //Modern browser
    else console.log( img.currentSrc );
}