jquery: fade in image after image

Question

I have a page with 10 images in and I want to fade them in one after another once the image has been downloaded. how can I detect the image is loaded and ready to be display

Answer 1

(Based on Kris Erickson's answer)

You may be able to avoid potential race conditions by adding the event to the image before adding it to the DOM (unconfirmed but I like to play it safe). Also this method is good for fading images on top of each other.

This is what I'm using for a gallery control where I add an image on top of another image and fade it in - then I remove the bottom image if I've already added 2 images.

var url = .....;
var container = $('#images_container');

$("").hide().load(function () {
    $(this).fadeIn(); 
}).attr('src', url).appendTo($(container ));

if ($(container).children().length > 2) {
    $(":nth-child(1)", container).remove();
}

Here's the HTML:

The CSS must be set up like this or the images will stack instead of being on top of each other.

#images_container {
   position: relative;
}

#images_container {
   position: absolute;
}