Question

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.

Here is the line of code I have that changes the source:

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

Answer 1

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!