17

我正在尝试检测图像的来源是否已更改。

在我的情况下，src 是从 jquery 更改的，我无权更改 jquery 文件。所以我试图检测来自 img 元素的 src 变化。

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

这是我当前的代码：

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

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

4

7 回答 7

15 
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});
于 2018-08-13T20:01:35.183 回答
8

你可以这样做，但是只有实现DOM 突变事件的新浏览器才会支持它......

divimg.addEventListener("DOMAttrModified", function(event) {
    if (event.attrName == "src") {
       // The `src` attribute changed!
    }
});
于 2012-05-18T15:35:01.827 回答
7

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

var img = $("<img />");
img.load(function() { console.log("loaded"); });
img.attr("src", "http://static.adzerk.net/Advertisers/ecc536e9e1204b7faccb15621f27d7bc.jpg");
于 2012-05-18T15:48:20.160 回答
7

DOMAttrModified可能会起作用，对此我一无所知……但 onload 对我来说绝对没问题。这是演示的小提琴。http://jsfiddle.net/QVqhz/

于 2012-05-18T15:37:11.630 回答
2

分析

  1. load更改或设置src的属性时触发事件<img />

  2. 如果用户没有在 中写入src属性<img />，浏览器会自动填写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');
    }
});
于 2015-10-02T23:35:09.043 回答
0

我认为没有事件，您可以创建自己的“事件”：

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

function onSrcChange() {
    // do something
}
于 2012-05-18T15:37:59.703 回答
0

我相信 jQuery 应该永远是要走的路，因为它支持跨浏览器。然而，“.load()”函数自jQuery 1.8起已被弃用。

今天我们应该像下面的例子一样使用“.on()”函数：

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

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

未捕获的 TypeError：a.indexOf 不是函数

于 2020-08-29T18:45:28.030 回答