问题
I'm using the picture
element with source
's to choose which image to load. And while I can add a load
listener, I cannot figure out which image was loaded as the img
tag's src
attribute and property are both empty, even when loaded!
<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>
How do I determine which image was loaded?
回答1:
In modern browsers that implement this, there appears to be a new property: currentSrc
. In the image.onload, you can check for this. In older browsers, it will use src
.
img.onload = function()
{
//Old browser
if ( typeof img.currentSrc === "undefined" ) console.log( img.src );
//Modern browser
else console.log( img.currentSrc );
}
来源:https://stackoverflow.com/questions/34366100/when-using-picture-source-and-srcset-how-check-which-src-was-loaded-img-src-i