При использовании изображения, источника и 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 );
}