检测img src更改

Question

我试图检测图像的来源是否发生了变化.

在我的情况下,src从jquery更改,我没有权利更改jquery文件.所以我试图从img元素中检测src变化.

如果src被更改,我想查看源代码,仅用于测试

这是我目前的代码:

var divimg = document.getElementById("img_div");
divimg.onchange = alert(divimg.getElementsByTagName('img')[0].src);

在页面上加载警报反应并显示src,但不显示src从jquery更改

Answer 1

var img = document.querySelector("#img_div img"),
observer = new MutationObserver((changes) => {
  changes.forEach(change => {
      if(change.attributeName.includes('src')){
        console.dir(img.src);
      }
  });
});
observer.observe(img, {attributes : true});

Answer 2

DOMAttrModified可能会工作,不知道...但onload对我来说绝对没问题.这是演示的小提琴.http://jsfiddle.net/QVqhz/

Answer 3

您可以这样做,但只有实现DOM突变事件的新浏览器才能支持它...

divimg.addEventListener("DOMAttrModified", function(event) {
    if (event.attrName == "src") {
       // The `src` attribute changed!
    }
});

Answer 4

每次src更改属性时,浏览器都会立即关闭并获取图像.一旦图像返回到浏览器,浏览器将触发loaded图像元素上的事件.因此,您可以src通过在此事件上设置回调来有效地监控更改.您可以执行类似于以下代码示例的操作.

var img = $("<img />");
img.load(function() { console.log("loaded"); });
img.attr("src", "http://static.adzerk.net/Advertisers/ecc536e9e1204b7faccb15621f27d7bc.jpg");