Detect load image when change image source

It's useful when you change image source such as photo slider, when you click thumbnail image, you can show the larger image.


Html code

Javascript Code:

 
   $('#photo_embbed .loading').css('display', 'block');
                    $('#photo_embbed a').attr('href', source);
                    $('#photo_embbed img.detail_image').attr('src',source);
                
                    $('#photo_embbed img.detail_image').bind('load', function() {
                        cheight=$('#photo_embbed img.detail_image').height();
                        $('#photo_embbed').animate({"height": cheight}, { duration: 500 }); 
                        $('#photo_embbed img.detail_image').unbind('click');
                        $('#photo_embbed .loading').css('display', 'none');
                    });
            

Show loading image when wating load image.
Change image source for image tag.
When you chane image souce, image will't appear suddent, Browser must loading image from server.
When brower loading image done, Browser will call bind function at event load image
Disable bind load image and unappear photo loading.