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. Here 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! ...