jQuery - 檢查圖像已加載

我在這裏有一個演示來說明我的問題。jQuery - 檢查圖像已加載

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

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

我一直在努力做這一切的一天，我不知道如果我有完全錯誤的想法。

我有漂浮馬上頁面圖像的列表。

我想的圖像在同一時間從左至右加載一個。當一個圖像完全加載時，下一個將開始。

我試過其他預加載的想法，但他們似乎都預裝所以我等待所有的圖像加載的所有圖像。

我的想法是把所有李時珍在一個數組，然後從頁面上刪除了李娜的，我可以再添加回力一次一個檢查圖像就裝好，然後裝入下一華里。

這類作品，但圖像還是隨機加載，我無法工作，如何檢查圖像是否添加下一個之前加載。

這是一個愚蠢的做法嗎？

我可以檢查圖像是否完全加載。

<!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 - 檢查圖像已加載

回答

相關問題