Jquery: fades image after image

Question

I have a page with 10 images and I want to fade them one after the other after loading the image. How can I detect that the image is uploaded and ready for display? and should I scroll through the downloaded fadeIn images and once fadedIn wait for the next download?

Answer 1

Just use the load () event on the image. For example.

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

Answer 2

You can preload the images ( see here ) and then call the fadein and fadeout methods in a loop in sequence.

Answer 3

( )

, , , DOM (, ). .

, , - , 2 .

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

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

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

HTML:

<div id="images_container"></div>

CSS , , .

#images_container {
   position: relative;
}

#images_container {
   position: absolute;
}