Detect a img src change

Question

I'am trying to detect if the source of a image is changed.

In my case the src is changed from jquery, and i have no right's to change the jquery file. So im trying to detect the src change from a img element.

I would like to see the source if the src is changed, just for testing

This is my current code:

var divimg = document.getElementById("img_div");
divimg.onchange = alert(divimg.getElementsByTagName('img')[0].src);

On the page load the alert react's and shows me the src, but not on a src change from jquery

Answer 1

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

Answer 2

You could do it, however it would only be supported by new browsers that implement the DOM mutation events...

divimg.addEventListener("DOMAttrModified", function(event) {
    if (event.attrName == "src") {
       // The `src` attribute changed!
    }
});