여러 이미지를로드 한 후 순서대로로드하십시오.

Question

다양한 크기의 4 개의 이미지가 있습니다. 나는 그들이 특정 순서로 적재되기를 바란다. 로드 핸들러를 사용하면 일단로드되면로드되고 필요할 때만 표시됩니다. 하지만 .fadeIn()을 순서대로 설정하면 반드시로드되지 않습니다.

아이디어가 있으십니까? 여기에 지금까지있어 무엇 :

$('.z2').load(function(){ 
    $(this).fadeIn(600); 
    $('.z4').delay(300).fadeIn(1900, function(){ 
     $('.z1').fadeIn(3250);         
         }); 
         }); 

나는 Z2는 Z4보다 ​​크기 때문에 Z2 및 Z4가 동시에 fadeIn하자, 그리고 Z4는 더 큰 있기 때문에 Z4가로드되면 그때 fadeIn에 Z1을 설정합니다.

전역 변수를 설정해야 할 수도 있습니다. 변수가 충족되면 사진이 흐려지고 변수가로드 함수에 의해 설정됩니다. 다른 아이디어라도 좋을 것이므로 너무 많은 시간을 낭비하지 않아도됩니다.

Answer 1

fadein을 호출하는로드 함수 대신로드 된 이미지 수를 추적하십시오. var를 0으로 설정하십시오. 이미지가로드 될 때마다 var를 증가 시키십시오. var가 4에 도달하면 THEN이 fadeins을 예약합니다.

지연으로 재생해도 문제가 없지만 네트워크 결함으로 인해 "큰"이미지가 오랜 시간 동안로드되지 않을 수 있습니다.