当使用图片、源代码和srcset时，如何检查加载了哪个src?(img.src为空）

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

本文关键字：src 加载 检查 为空 img 何检查 源代码 srcset      更新时间：2023-09-26

我使用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>

如何确定加载了哪个图像？

在实现此功能的现代浏览器中，似乎出现了一个新属性：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 );
}
相关文章：