jquery: dissolvenza immagine dopo immagine

Question

Ho una pagina con 10 immagini e desidero dissolvolarle una dopo l'altra una volta che l'immagine è stata scaricata. come posso rilevare che l'immagine è stata caricata e pronta per essere visualizzata? e dovrei scorrere le immagini caricate in dissolvenza e una volta sbiadito in attesa del prossimo caricamento?

Answer 1

Basta usare l'evento load() su un'immagine. Per esempio.

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

Answer 2

È possibile precaricare le immagini (See here) e quindi chiamare sequenzialmente i metodi fadein e fadeout in un ciclo.

Answer 3

(in base alla risposta di Kris Erickson)

Si può essere in grado di evitare potenziali condizioni di gara, aggiungendo l'evento per l'immagine prima di aggiungerlo al DOM (non confermato ma mi piace giocare sicuro). Anche questo metodo è utile per dissolvere le immagini l'una sull'altra.

Questo è quello che sto usando per un controllo galleria in cui aggiungo un'immagine sopra un'altra immagine e la dissolvenza - poi rimuovo l'immagine in basso se ho già aggiunto 2 immagini.

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

Ecco il codice HTML:

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

Il CSS deve essere impostata come questo o le immagini impilerà invece di essere l'uno sopra l'altro.

#images_container { 
    position: relative; 
} 

#images_container { 
    position: absolute; 
}