jquery: fundido en la imagen después de la imagen

Question

Tengo una página con 10 imágenes y quiero fundirlas una tras otra una vez que se haya descargado la imagen. ¿Cómo puedo detectar que la imagen está cargada y lista para mostrarse? y debería recorrer las imágenes cargadas de fadeIn y una vez desvanecida, esperar a que la siguiente se cargue?

Answer 1

Simplemente use el evento load() en una imagen. P.ej.

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

Answer 2

Puede precargar las imágenes (See here) y luego llamar a los métodos fadein y fadeout secuencialmente en un bucle.

Answer 3

(Sobre la base de la respuesta de Kris Erickson)

Usted puede ser capaz de evitar posibles condiciones de carrera, añadiendo el evento a la imagen antes de añadir a la DOM (sin confirmar pero me gustaría jugar seguro). También este método es bueno para difuminar imágenes una encima de la otra.

Esto es lo que estoy usando para un control de galería donde agrego una imagen sobre otra imagen y la atenúo; luego elimino la imagen inferior si ya agregué 2 imágenes.

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(); 
} 

Aquí está el código HTML:

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

El CSS debe estar configurado como tal o las imágenes se acumulará en lugar de estar en la parte superior de uno al otro.

#images_container { 
    position: relative; 
} 

#images_container { 
    position: absolute; 
}