我正试图检测图像的来源是否发生了变化。
在我的情况下,src从jquery更改,我没有权利更改jquery文件。 所以我试图从img元素中检测src变化。
我想看看源代码是否更改了src,仅用于测试
这是我目前的代码:
var divimg = document.getElementById("img_div");
divimg.onchange = alert(divimg.getElementsByTagName('img')[0].src);
在页面上加载警报反应并向我显示src,但不显示从jquery更改的src
答案 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)
分析
load
事件在src
属性更改或设置时触发
如果用户未在<img />
中写入src
属性,浏览器将自动填写<img />
属性(,例如data:image / png; base64,... )以防止204错误。这也会触发src
事件。
结论
基本上使用load
事件,但检查它是否是默认图像。 (可能默认图像为1 x 1像素)
的解决方案的
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不是函数