javascript - 画像、ソース、および srcset を使用する場合、ロードされた src を確認するにはどうすればよいですか? (img.src は空です)

Question

pictureを含む要素を使用して、sourceロードする画像を選択しています。loadまた、リスナーを追加することはできますが、imgタグのsrc属性とプロパティが両方とも空であるため、ロードされた場合でも、どのイメージがロードされたかを特定できません!

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

読み込まれた画像を特定するにはどうすればよいですか?

Answer 1

これを実装する最新のブラウザーでは、新しいプロパティがあるようです: currentSrc. image.onload で、これを確認できます。古いブラウザでは、src.

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

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