페이지가로드 된 후 이미지가 차례로 페이드 인됩니다.

Question

자 이제 내 작업 코드는 여기에 있습니다 ...

$(window).load(function() { 
    $("#scroller li").each(function(i) { 
      $(this).delay(400*i).fadeIn(); 
    }); 
}); 

창을로드 한 후 이미지가 다른 이미지로 완전히 사라집니다. 하지만 내 페이지에는 div에 더 많은 이미지가 들어있는 html 파일을 호출하는 링크가 있습니다. 이 스크립트는 이미지를 페이드 인하는데 이미지가 페이드 인하는 결과를 가져옵니다.

그래서 내가 원하는 것은 문서가 준비되면 모든 이미지를로드 한 다음 페이드 아웃합니다. 그들을

스크립트를 시작 .bind('load') 사용할 필요가 그래서 .bind('load') 순서입니다 ... 내 생각에 .. 나는 꽤 새로운이 ...

이것은 내가 생각해 낸 것입니다 ,하지만 작동하지 않습니다 .. 아마 누군가가 내게 말할 수 ...

$(document).ready(function() { 
    $("#scroller li").each(function(i) { 
      $(this).bind('load', function(){ 
       $(this).delay(400*i).fadeIn(); 
      }); 
     }); 
    }); 

Answer 1

$ (document) .ready가 전체 페이지의 내용이로드되어 함수가 실행될 때까지로드가 이미 발생했기 때문에 이미로드가 발생했습니다.

는 리튬을 시작하거나 리튬의 숨겨진 다음 바로이 일을 시도 : 당신이 이미지를 미리로드 할 같은

$(document).ready(function() { 
    $("#scroller li").each(function(i) { 
      $(this).delay(400*i).fadeIn(); 
     }); 
    }); 

Answer 2

그것은 소리. 이미지가 미리로드 된 경우 캐싱되므로 처음 표시 할 때 이미지가 잘리는 대신 전체 이미지가 표시됩니다. `$ (""). attr ('src', 'source/of/image')를 사용하여 이미지를 사전로드 할 수 있습니다. 이렇게하면 이미지가 메모리에로드되고 미리 캐시해야합니다. DOM에 추가하지 않습니다.