jquery change event when image src changes

Question

$('img.product_image').attr('src').change(function() {
    alert($('img.product_image').attr('src'));
});

Hi ya'll

I am trying to write some code that will alert the img.product_image when the src changes, but when I run my page and click a button to change the image src, the alert does not come up...is my syntax wrong?

here is the image:

<img class="product_image colorbox-1160" id="product_image_1160" alt="Black Onyx Ring" title="Black Onyx Ring" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring.jpg" width="400">

and the image src would change when I would click on one of these thumbnails:

<div class="wpcart_gallery" style="text-align:center; padding-top:5px;">
    <a rev="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/DSC_0162.jpg" class="thickbox cboxElement" rel="Black Onyx Ring" href="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/DSC_0162.jpg" title="DSC_0162">
        <img width="50" height="50" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/DSC_0162-50x50.jpg" class="attachment-gold-thumbnails colorbox-1160 " alt="DSC_0162" title="DSC_0162">
    </a>
    <a rev="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring1.jpg" class="thickbox cboxElement" rel="Black Onyx Ring" href="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring1.jpg" title="Black Onyx Ring">
        <img width="50" height="50" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring1-50x50.jpg" class="attachment-gold-thumbnails colorbox-1160 " alt="Black Onyx Ring" title="Black Onyx Ring">
    </a>
    <a rev="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring.jpg" class="thickbox" rel="Black Onyx Ring" href="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring.jpg" title="Black Onyx Ring">
        <img width="50" height="50" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring-50x50.jpg" class="attachment-gold-thumbnails colorbox-1160 " alt="Black Onyx Ring" title="Black Onyx Ring">
    </a>
</div>

Answer 1

You can use .load event in this case:

$('img.product_image').on('load', function () {
 alert($('img.product_image').attr('src'));
});

Answer 2

This code should work more reliably than answers that use 'load':

// ensures this works for some older browsers
MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

// the element you want to observe. change the selector to fit your use case
var img = document.querySelector('img.product_image')

new MutationObserver(function onSrcChange(){
  // src attribute just changed!!! put code here
  alert($('img.product_image').attr('src'))
})
  .observe(img,{attributes:true,attributeFilter:["src"]})

While some answers that use the 'load' event may work most of the time, the load event fires after the 'src' finishes downloading. That event may be delayed if the download takes a while or it may never fire if there is an issue downloading (which happens if the image times out or when you set src to an image that doesn't exist or is invalid, like an empty string ).

BTW jQuery isnt required but if you really want to use it you can get the target img element like so:

var img = $('img.product_image').get(0)

Answer 3

You could make use of load event if you like

$("img.product_image").load(function(){
     alert("New image loaded");
});

Jsfiddle here