Jquery how to cause action after image src is changed and loaded

So I have a script that changes the main image src when a thumbnail is clicked on. This is all good and well, except that occasionally the image doesn't load immediately when it is clicked on.

Essentially how do I know when the new image is loaded from the src change.

Her开发者_如何学Goe is the line of code I have that changes the source:

$thumbnail_image_src = $(this).find('.thumbnail-image').attr("data-full");

Bind a handler to the 'load' event for the img tag (this JSFiddle)

 $(this).find('.thumbnail-image').each(function() {
   $(this).load(function() {
     alert('image has changed and loaded');
   })
   .error(function() {
     alert('image has failed to load');
   }).attr('src', $(this).attr('data-full'));
 });

These functions will fire at the appropriate events. Enjoy!

img tag has a load and error event which you can use to detect whether the image is loaded or not.

$("img").load(function(){
  //Image loaded
}).error(function(){
  //Image load failed
}).attr("src", $thumbnail_image_src);