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

Just use the load() event on an image. E.g.

$('#some_image').hide()
    .load(function () {
      $(this).fadeIn();
    })
    .attr('src', 'images/headshot.jpg')