javascript - 当 标签的 currentSrc 发生变化时，是否会触发 Javascript 事件？

Question

假设我有一个 <img>标签:

<img id="my_tag" src="/default.jpg" srcset="/small.jpg 500w, /medium.jpg 1000w, /large.jpg 2000w">

当我加载页面时，JavaScript 可以告诉我 srcset 中的哪一个它正在使用:

document.getElementById("my_tag").currentSrc

我如何检测 currentSrc 何时更改并触发事件？

避免“重复!”的呼声我可以使用 DOM MutationObserver code here 确认它不会在 Chrome 中触发, 使用 jQuery observe ，或使用 onload事件:

var my_tag = document.getElementById("my_tag");
my_tag.onload = function(){
    alert("CHANGED");
    console.log( "Src changed to " + my_tag.currentSrc );
};

我认为这是因为当srcset使用它似乎不会在 currentSrc 更改时更新 DOM。

Answer 1

您可以使用图像的 'onload' 事件:

var my_tag = document.getElementById("my_tag");
my_tag.onload = function(){
    console.log( "Src changed to " + my_tag.currentSrc );
}

Cross-browser image onload event handling 上的相关帖子