Question

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

Answer 1

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.