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

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.