检测img src更改

时间:2012-05-18 15:31:24

标签: javascript image onchange src

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

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

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

这是我目前的代码:

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

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

7 个答案:

答案 0 :(得分:7)

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

答案 1 :(得分:6)

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

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

答案 2 :(得分:5)

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

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

答案 3 :(得分:1)

分析

    {li>

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

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

  2. 结论

    1. 基本上使用load事件,但检查它是否是默认图像。 (可能默认图像为1 x 1像素

      • 假设 - 您的图片大于1 x 1像素
    2. 的解决方案

      load

答案 4 :(得分:1)

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

答案 5 :(得分: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
}

答案 6 :(得分:0)

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

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

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

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

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