我正在尝试检测图像的来源是否已更改。
在我的情况下，src 是从 jquery 更改的，我无权更改 jquery 文件。 所以我试图检测来自 img 元素的 src 变化。
如果src改了我想看看源码，只是为了测试
这是我当前的代码：
var divimg = document.getElementById("img_div");
divimg.onchange = alert(divimg.getElementsByTagName('img')[0].src);
在页面上加载警报反应并向我显示 src，但不是从 jquery 更改 src
【问题讨论】：
标签： javascript image onchange src
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});
【讨论】：
你可以这样做，但是它只会被实现DOM mutation events的新浏览器支持...
divimg.addEventListener("DOMAttrModified", function(event) {
if (event.attrName == "src") {
// The `src` attribute changed!
}
});
【讨论】：
DOMAttrModified 可能会起作用，但不知道……但 onload 对我来说绝对没问题。这是演示的小提琴。 http://jsfiddle.net/QVqhz/
【讨论】：
每次更改src 属性时，浏览器都会立即关闭并获取图像。一旦图像返回到浏览器，浏览器将触发图像元素上的loaded 事件。因此，您可以通过在此事件上设置回调来有效地监控src 的变化。您可以执行类似于以下代码示例的操作。
var img = $("<img />");
img.load(function() { console.log("loaded"); });
img.attr("src", "http://static.adzerk.net/Advertisers/ecc536e9e1204b7faccb15621f27d7bc.jpg");
【讨论】：
分析
<img /> 的src 属性被更改或设置时触发load 事件
如果用户没有在<img />中写入src属性，浏览器会自动填写src属性（如data:image/png;base64,...) 以防止出现 204 错误。这也会触发load 事件。
结论
基本使用load事件，但检查它是否是默认图像。 （可能默认图像是 1 x 1 像素）
解决方案
$('img').load(function() {
var imageObj = $(this);
if (!(imageObj.width() == 1 && imageObj.height() == 1)) {
console.log('Image source changed');
}
});
【讨论】：
我认为没有事件，您可以创建自己的“事件”：
var divimg = document.getElementById("img_div"),
prevSrc;
setInterval(function() {
if (divimg.src != prevSrc) {
prevSrc = divimg.src;
onSrcChange();
}
}, 1000); // 1000ms = 1s
function onSrcChange() {
// do something
}
【讨论】：
src 属性是否已更改。这似乎非常昂贵！我不敢相信投票解决方案是个好主意。
我相信 jQuery 应该永远是要走的路，因为它支持跨浏览器。但是，“.load()”函数自 jQuery 1.8 以来已被弃用。
今天我们应该使用“.on()”函数，如下例：
$('img.my-image-class-name').on('load', function(){
console.log('Hello, world');
});
如果您尝试使用“.load()”函数，您的代码将无法正常工作。您将收到以下错误消息：
未捕获的 TypeError：a.indexOf 不是函数
【讨论】：