检测图片链接的变化

Question

我想要检测图片的来源是否发生了改变。

在我的情况下，src是通过jquery更改的，而我没有权利更改jquery文件。因此，我正在尝试从img元素中检测src更改。

如果src更改了，我想查看源代码，只是为了测试。

这是我目前的代码：

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

在页面加载时，弹出框会反应并显示源代码，但使用jQuery更改源代码时不会触发弹出框。

- Sporting Gool

---

请阅读https://dev59.com/D2455IYBdhLWcg3wD_2Z。 - a.tereschenkov

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});

- Dorian Andrés

---

这应该是被接受的答案，现在已经是2018年了，观察者模式是正确的选择！ - user2677034

Answer 2

你可以这样做，但只有实现了DOM MutationObserver的新浏览器才会支持它...

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

- alex

Answer 3

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

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

- Joseph Moniz

Answer 4

DOMAttrModified可能有效，我不确定...但是对于我来说，onload绝对可以正常工作。这里有一个带有演示的fiddle。 http://jsfiddle.net/QVqhz/

- Parth Thakkar

---

根据 https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Mutation_events，该方法已被弃用，使用它可能会导致您的网站停止工作，因为该功能已从标准中删除。 - Paul Stark

Answer 5

分析

1. 当<img />的src属性被改变或设置时，将触发load事件。

2. 如果用户没有在<img />中写入src属性，则浏览器会自动填充src属性（例如data:image/png;base64,...）以防止204错误。这也会触发load事件。

结论

1. 基本上使用load事件，但要检查它是否是默认图像。（可能，默认图像是1 x 1像素）

   • 假设 - 您的图像比1 x 1像素大

解决方案

$('img').load(function() {
    var imageObj = $(this);
    if (!(imageObj.width() == 1 && imageObj.height() == 1)) {
        console.log('Image source changed');
    }
});

- Chemical Programmer

Answer 6

我认为没有这方面的事件，你可以创建自己的“事件”：

var divimg = document.getElementById("img_div"),
    prevSrc;
setInterval(function() {
    if (divimg.src != prevSrc) {
        prevSrc = divimg.src;
        onSrcChange();
    }
}, 1000); // 1000ms = 1s

function onSrcChange() {
    // do something
}

- Wouter J

---

注意，这个方案每 1 秒钟轮询查看 src 属性是否发生了改变。这看起来非常耗费资源！我不相信轮询的方式是一个好主意。 - JonBrave

Answer 7

我认为jQuery应该始终是首选，因为它具有跨浏览器支持。然而，自jQuery 1.8之后，".load()"函数已被弃用。

今天我们应该使用".on()"函数，就像以下示例：

$('img.my-image-class-name').on('load', function(){
  console.log('Hello, world');
});

如果您尝试使用".load()"函数，您的代码将无法正常工作。您将会收到以下错误信息：

Uncaught TypeError: a.indexOf不是一个函数

- DrupalFever