CODEWITHSUNDEEP
javascriptimageonchangesrc
Sporting Gool
Sporting Gool

Reputation: 231

Detect a img src change

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

Upvotes: 23

Views: 39138

Answers (7)

DrupalFever
DrupalFever

Reputation: 4364

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

Upvotes: 0

Dorian Andrés
Dorian Andrés

Reputation: 221

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

Upvotes: 22

Chemical Programmer
Chemical Programmer

Reputation: 4520

Analysis

  1. load event is triggered when src attribute of <img /> is changed or set

  2. 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

  1. 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');
    }
});

Upvotes: 2

Joseph Moniz
Joseph Moniz

Reputation: 435

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

Upvotes: 9

Wouter J
Wouter J

Reputation: 41934

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
}

Upvotes: 0

Parth Thakkar
Parth Thakkar

Reputation: 5475

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/

Upvotes: 7

alex
alex

Reputation: 490343

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

Upvotes: 9

Related Questions