При использовании изображения, источника и srcset, как проверить, какой src был загружен? (img.src is empty)

Question

Я использую элемент picture с разрешением source, чтобы выбрать изображение для загрузки. И хотя я могу добавить слушателя load, я не могу понять, какое изображение было загружено, поскольку атрибут и свойство тега imgsrc являются пустыми даже при загрузке!

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