Ravina Jasani Ravina Jasani - 1 month ago 12
Javascript Question

Simple mutation observer example in JavaScript doesn't work

I try to add a

MutationObserver
in my web page for get changes in an img src but that doesn't work.

Here's the code used:



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




Answer

If you call disconnect method you will not receive notification anymore:

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: false,
  characterData: false
};

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

Comments