jQuery - 이미지가로드 됨

여기에 내 질문을 설명하는 데모가 있습니다. jQuery - 이미지가로드 됨

http://www.ttmt.org.uk/forum/gallery2/

http://jsfiddle.net/ttmt/tmyqj/11/

는 내가 완전히 잘못된 생각을 가지고 있다면 나도 몰라, 하루 종일이 작업을 수행하기 위해 노력했습니다.

페이지 오른쪽에서 떠 다니는 이미지 목록이 있습니다.

이미지를 왼쪽에서 오른쪽으로 한 번에 하나씩로드하고 싶습니다. 한 이미지가 완전히로드되면 다음 이미지가 시작됩니다.

다른 미리로드 된 아이디어를 사용해 보았지만 이미지가 모두 미리로드되어 모든 이미지가로드 될 때까지 기다리는 중입니다.

내 생각은 모든 li을 배열에 배치 한 다음 페이지에서 li을 삭제하는 것이 었습니다. 그런 다음 이미지를로드 한 다음 li를로드 한 다음 li을 한 번에 하나씩 추가 할 수있었습니다.

이런 종류의 작품은 여전히 이미지가 무작위로로드되며 다음 이미지를 추가하기 전에 이미지가로드되었는지 확인하는 방법을 찾을 수 없습니다.

이렇게하는 것은 어리석은 방법입니까?

이미지가 완전히로드되었는지 확인할 수 있습니까?

<!DOCTYPE html> 
    <html> 
     <meta charset="UTF-8"> 
     <head> 
     <title>Title of the document</title> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"> 

     <style type="text/css"> 
     #header{ 
      position:fixed; 
      margin:20px 0 0 20px; 
     } 
     #header #logo{ 
      width:100px; 
      height:80px; 
      background:red; 
     } 
     ul#gallery { 
      margin:120px 0 0 0; 
      float:left; 
      height:500px; 
      margin-right:-20000px; 
     } 
     ul#gallery li{ 
      display:inline; 
     } 
     ul#gallery li img{ 
      float:left; 
      height:100%; 
     } 

     </style> 

     </head> 

    <body> 

     <div id="header"> 
     <div id="logo"> 

     </div><!-- #logo --> 
     </div><!-- #header --> 

     <ul id="gallery"> 
     <li><a href=""><img src="images/01.jpg" /></a></li> 
     <li><a href=""><img src="images/02.jpg" /></a></li> 
     <li><a href=""><img src="images/03.jpg" /></a></li> 
     <li><a href=""><img src="images/04.jpg" /></a></li> 
     <li><a href=""><img src="images/05.jpg" /></a></li> 
     <li><a href=""><img src="images/06.jpg" /></a></li> 
     <li><a href=""><img src="images/07.jpg" /></a></li> 
     <li><a href=""><img src="images/08.jpg" /></a></li> 
     <li><a href=""><img src="images/09.jpg" /></a></li> 
     <li><a href=""><img src="images/10.jpg" /></a></li> 
     <li><a href=""><img src="images/11.jpg" /></a></li> 
     <li><a href=""><img src="images/13.jpg" /></a></li> 
     <li><a href=""><img src="images/14.jpg" /></a></li> 
     <li><a href=""><img src="images/15.jpg" /></a></li> 
     </ul> 


    <script> 


     $(function(){ 

     var imgArr=[]; 

     var lis = $('#gallery li') 

     lis.each(function(){ 
      imgArr.push(this.outerHTML); 
      $(this).remove(); 
     }) 

     window.ili = 0; 

     rePopulate();//Add the li's back one at a time. 

     function rePopulate(){ 
      var newli = $('#gallery').append(imgArr[ili]); 
      var newImg = newli.find('img'); 
      //console.log(newImg); 
      if(window.ili<=imgArr.length){ 
      //Need to check here if the image has loaded completely before loading the next 
      window.ili++; 
      rePopulate(); 
      } 
     } 
     }) 

     </script> 
    </body> 

    </html>

출처

2012-11-26 ttmt

어쩌면 당신은 [**. 오류() **] (http://api.jquery.com/error/)를 찾고있을 수도 있습니다 – adeneo

왜 이것을하고 싶습니까? –

문서 준비가 아닌 윈도우'onload' 이벤트를 사용하면 모든 이미지가로드 될 때까지 호출되지 않습니다. 또한 함수를 직접 호출하는 대신'setTimeout (rePopulate, 100)'을 사용하여 각 이미지를 (다시) 표시하는 사이에 지연이 생기도록해야합니다. 그렇지 않으면 사용자가 말할 수있는 한 모두 동시에 추가됩니다 . – nnnnnn

library을 사용할 수 있습니다. 제 프로젝트에서 사용했습니다.

출처

2012-11-26 20:54:50

imagesLoaded 다운로드, 캐싱 및 손상된 이미지를 확인합니다. 훌륭한 플러그인 –

jQuery - 이미지가로드 됨

답변

관련 문제