如何检测通过Image（）构建的图像是否更改了源？

Question

我希望console.log通过我的网页上的Image构造函数构建的任何图像的src属性。加载后我不需要图像 - 就在src属性发生变化之后。

我已经尝试重写Image.onload方法（这个方法当然给了我图像已经加载的后一点），但是这段代码没有console.log任何东西：

Image.prototype.nativeOnload = Image.prototype.onload;
Image.prototype.onload  = function() {
  console.log(this.src);
  this.nativeOnload();
};

也许这是因为onload属性被覆盖了。

如何检测通过js Image（）构造函数构建的网页上的任何图像何时更改其源？有没有办法用javascript观察者做到这一点？

Answer 1

第一选择

最简单（也是开销较少）的方法是在代码中实现一个更改图像标记源的回调。但是，为此您需要访问de代码并且必须能够更改它。

第二个选项

你也可以定义一个DOM eventlistener但并非所有浏览器都支持这个。

  

DOMAttrModified

stackoverflow上的前一个question与此选项有关。

第三选择

实现此目的的第三种方法是定期检查图像的来源，看看自上次检查后它是否发生了变化。你可以用间隔做到这一点。

jsfiddle demo（点击＆＃34;更改来源＆＃34;按钮甚至尝试更改firebug中的来源以测试此内容）

HTML

<img id="check" src="yourimagesource">

JS

var check_img=$("#check");
var current_src=check_img.attr("src");


window.setInterval(function(){
    new_src=check_img.attr("src");
    if(current_src!=new_src){
        alert("src changed");
        current_src=new_src;
    }

}, 500);