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

Question

我使用带有 source 的 picture 元素来选择要加载的图像。虽然我可以添加一个 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 );
}

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

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

javascript

html

picturefill