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

Please, read http://stackoverflow.com/questions/4561845/firing-event-on-dom-attribute-change — a.tereschenkov, May 18 '12 at 15:37

score 21 · Answer 1 · answered Aug 13 '18 at 20:01

21

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

answered Aug 13 '18 at 20:01

Dorian Andrés

211
2
3

2

This should be the accepted answer, now its 2018 the observer method is the way to go! – user2677034 Nov 21 '18 at 18:38

score 9 · Answer 2 · answered May 18 '12 at 15:35

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

score 9 · Answer 3 · answered May 18 '12 at 15:48

Every time the src attribute is changed the browser will immediately go off and fetch the image. Once the image is returned to the browser the browser will trigger the loaded event on the image element. So you can effectively monitor src changing by setting a callback on this event. You could do something similar to the following code example.

var img = $("<img />");
img.load(function() { console.log("loaded"); });
img.attr("src", "http://static.adzerk.net/Advertisers/ecc536e9e1204b7faccb15621f27d7bc.jpg");

score 7 · Answer 4 · answered May 18 '12 at 15:37

7

DOMAttrModified might work, no idea about that...but onload works definitely fine for me. Here's the fiddle with the demo. http://jsfiddle.net/QVqhz/

answered May 18 '12 at 15:37

Parth Thakkar

5,427
3
25
34

3

According to https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events this method is deprecated and could cause your site to stop working since this feature has been dropped from the standard. – Farrah Stark Oct 06 '15 at 22:59

score 2 · Answer 5 · answered Oct 02 '15 at 23:35

Analysis

load event is triggered when src attribute of <img /> is changed or set
If user didn't write src attribute in <img />, browser will fill out src attribute automatically (such as data:image/png;base64,...) to prevent 204 Error. This will also trigger load event.

Conclusion

Basically use load event, but check whether it is default image or not. (Probably, default image would be 1 x 1 pixel)
- Assumption - your image is bigger than 1 x 1 pixel

Solution

$('img').load(function() {
    var imageObj = $(this);
    if (!(imageObj.width() == 1 && imageObj.height() == 1)) {
        console.log('Image source changed');
    }
});

score 0 · Answer 6 · answered May 18 '12 at 15:37

0

I think there is no event for that, you can create your own 'event':

var divimg = document.getElementById("img_div"),
    prevSrc;
setInterval(function() {
    if (divimg.src != prevSrc) {
        prevSrc = divimg.src;
        onSrcChange();
    }
}, 1000); // 1000ms = 1s

function onSrcChange() {
    // do something
}

answered May 18 '12 at 15:37

Wouter J

41,455
15
107
112

6

Be aware, this solution polls to see whether the `src` attribute has changed every 1 second. That seems very expensive! I cannot believe a polling solution is a good idea. – JonBrave Jul 24 '14 at 16:31

score 0 · Answer 7 · answered Aug 29 '20 at 18:45

I believe that jQuery should always be the way to go because of its cross-browser support. However the ".load()" function has been deprecated since jQuery 1.8.

Today we are supposed to use the ".on()" function like the following example:

$('img.my-image-class-name').on('load', function(){
  console.log('Hello, world');
});

If you attempt to use the ".load()" function, your code will simply not work. You will get the following error message:

Uncaught TypeError: a.indexOf is not a function

Detect a img src change

7 Answers7

Linked