Question

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

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

我想看看源代码是否更改了src，仅用于测试

这是我目前的代码：

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

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

Answer 1

DOMAttrModified可能有用，不知道这个......但onload对我来说绝对没问题。这是演示的小提琴。 http://jsfiddle.net/QVqhz/

Answer 2

您可以这样做，但只有实现DOM mutation events的新浏览器支持...

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

Answer 3

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

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

Answer 4

分析

load事件在src属性更改或设置时触发

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

结论

基本上使用load事件，但检查它是否是默认图像。（可能默认图像为1 x 1像素）
- 假设 - 您的图片大于1 x 1像素

的解决方案的

load

Answer 5

let blob = repo.getBlob(sha, function(){
    console.log("===== BLOB =====");
    console.log(blob);
});

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
}

Answer 7

我相信jQuery应该总是要走的路，因为它具有跨浏览器的支持。但是，自jQuery 1.8起，不推荐使用“ .load（）”函数。

今天，我们应该像下面的示例一样使用“ .on（）”函数：

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

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

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

检测img src更改

7 个答案: