Question

我尝试在我的网页中添加MutationObserver来跟踪图片src中的更改，但这并不起作用。

以下是使用的代码：

＆＃13;

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();

＆＃13;

<img src="http://i.stack.imgur.com/k7HT5.jpg" id="img" class="pic" height="100">

＆＃13;

Answer 1

如果您拨打disconnect方法，则不会再收到通知：

Quote from MDN

disconnect()

停止MutationObserver实例接收通知 DOM突变。直到再次使用observe（）方法，观察者的不会调用回调。

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">

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

1 个答案: