使用圖片、源和 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 );
}