JavaScript中的简单变异观察器示例不起作用

我尝试在我的网页中添加MutationObserver以获取img src中的更改,但这不起作用.

这是使用的代码:

setTimeout(function() {
  document.getElementById("img").src = "http://i.stack.imgur.com/aQsv7.jpg"
},2000);

var target = document.querySelector('#img');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });
});

var config = {
  attributes: true,childList: false,characterData: false
};

observer.observe(target,config);
observer.disconnect();
<img src="http://i.stack.imgur.com/k7HT5.jpg" id="img" class="pic" height="100">

解决方法

如果您调用disconnect方法,则不会再收到通知:

Quote from MDN

disconnect()

Stops the MutationObserver instance from receiving notifications of
DOM mutations. Until the observe() method is used again,observer’s
callback will not be invoked.

setTimeout(function() {
  document.getElementById("img").src = "http://i.stack.imgur.com/aQsv7.jpg"
},2000);

setTimeout(function() {
      document.getElementById("img").src = "http://i.imgur.com/Xw6htaT.jpg"
    },4000);

var target = document.querySelector('#img');

var observer = new MutationObserver(function(mutations) {
  
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });
});

var config = {
  attributes: true,childList: true,characterData: true
};

observer.observe(target,config);

// otherwise
observer.disconnect();
observer.observe(target,config);
<img src="http://i.stack.imgur.com/k7HT5.jpg" id="img" class="pic" height="100">

相关文章

kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小