Q:

image loading information with jquery

I have a page which has a img holder with the html: -
<img src="someimage.jpeg" alt="image" class="show_image"/>

Now i m updating the image with jquery using the code...
$('.show_image').attr('src', 'anotherimage.jpeg');

Now its working fine but i want to show the users the image is being loaded and may wait
as the image size may be huge...
Is there any method in jquery to get the information of percent loaded(bytes read/remaining) 
or if the image load is complete...
Also how can i place a div over the image placeholder  such that the 
div can fade the image(opacity:0.8) and add some text over the div as loading or something
thanks

A:

You can do something like this:
// change image
$('.show_image').attr('src', 'anotherimage.jpeg');
// image is loading
$('#divID').html('Image is being loaded....');

// image loaded
$('.show_image').load(function(){
  // hide/remove the message
  $('#divID').html('');
});

You assign load event to the image which fires when image has finished loading. Before that, you can show your message/progress/loader.

