我使用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 );
}