使用图片、源和 srcset 时如何检查加载了哪个 src？ （img.src 为空）

Question

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?

Answer 1

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 );
}