jquery : 이미지 뒤 이미지 페이드 아웃

Question

이미지가 10 개있는 페이지가 있고 이미지를 다운로드 한 후 페이드 인하하고 싶습니다. 이미지가로드되어 표시 될 준비가되었는지 어떻게 알 수 있습니까? 로드 된 이미지 fadeIn을 통해 반복해야하고 한 번 fadedIn을로드 할 때까지 기다려야합니까?

Answer 1

이미지에 load() 이벤트 만 사용하면됩니다. 예 : (크리스 에릭슨의 답변에 따라)

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

Answer 2

어쩌면 이미지를 사전로드 (See here) 한 다음 루프에서 순차적으로 fadein 및 fadeout 메서드를 호출 할 수 있습니다.

Answer 3

당신은 DOM (미확인에 추가하기 전에 이미지에 이벤트를 추가하여 잠재적 인 경쟁 조건을 방지 할 수 있습니다하지만 난 그것을 재생하고자 안전한). 또한이 방법은 이미지를 서로 위에 희미 해지는 데 좋습니다.

다른 이미지 위에 이미지를 추가하고 페이드 인하는 갤러리 컨트롤에 사용하고있는 이미지입니다. 이미 2 개의 이미지를 추가 한 경우 하단 이미지를 제거합니다. CSS는이 같은 설정해야합니다 또는 이미지 대신 서로의 상단에있는의 스택 것

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

:

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입니다.

#images_container { 
    position: relative; 
} 

#images_container { 
    position: absolute; 
}