jquery: fade in image after image

Question

Mam stronę z 10 obrazami i chcę zanikać je jeden po drugim po pobraniu obrazu. jak mogę wykryć, że obraz jest załadowany i gotowy do wyświetlenia? i czy powinienem przejrzeć załadowane obrazy fadeIn i raz wyblakam czekać na następny ładowanie?

Answer 1

Wystarczy użyć zdarzenia load() na obrazie. Na przykład.

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

Answer 2

Możesz wstępnie załadować obrazy (See here), a następnie wywołać kolejno metody fadein i fadeout w pętli.

Answer 3

(Na podstawie odpowiedzi Kris Ericksona)

Możesz być w stanie uniknąć potencjalnych warunków wyścigu dodając zdarzenie do obrazu przed dodaniem do DOM (niepotwierdzony ale lubię go grać bezpieczny). Również ta metoda jest dobra do blaknięcia obrazów jeden na drugim.

To jest to, czego używam do sterowania galerią, w którym dodaję obraz na górze innego obrazu i zaniam go - wtedy usuwam dolny obraz, jeśli dodałem już 2 obrazy.

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

Oto HTML:

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

CSS należy ustawić tak czy obrazy będą układać zamiast być na szczycie siebie.

#images_container { 
    position: relative; 
} 

#images_container { 
    position: absolute; 
}