Wait for a particular image to load completely using jquery?

Question

I am currently using the code below to load images but I want to show some kind of loading gif before the image loads completely.

$('#addimage').attr('src', src[i]);
$('#addimage').show();

Since I am using this in a animated mediabox the image loading in blocks does not look good so by the time the image is loading I want to replace it by showing a loading gif. Thanks

Answer 1

Why not just set the src attribute to point to a loading image (EG, animated gif) and just show it the whole time?

Answer 2

You can bind the onload event to the image.

Answer 3

You can use the callback event for once the image has loaded. Something like:

$('#addimage').load(function() { $(this).show() });
$('#addimage').attr('src', src[i]);

So you setup the load handler first, then apply your src attribute. This is assuming the image is hidden by default (via CSS, etc).

Answer 4

Use the load() event:

$("#addimage").load(function() {
  $(this).show();
});

Edit: to show one image until another loads is a little more convoluted but entirely possible. See Image Loading.