檢查動態加載的圖像是否完整

Question

我有一段代碼發佈到一個php腳本，該腳本讀取文件夾中的所有文件並將它們返回，所有這些文件都是img的，jquery分析信息，每個var都是一個數組圖像被保存爲img對象與src，寬度，高度和attr，成功我想檢查是否每個圖像加載，然後最後完全激發另一個功能，並刪除一個div。但我不知道如何檢查圖像是否已完全加載，我一直在使用.complete來玩弄，但它似乎沒有加載，函數調用它直到img加載，然後返回true，以便它可以保持去。這是代碼，它有點混亂，可能不是一個很好的代碼。

var gAllImages = []; 
function checkFed() 

{ 
    var leni = gAllImages.length; 
    for (var i = 0; i < leni; i++) { 


     if (!gAllImages[i].complete) { 
      var percentage = i * 100.0/(leni); 
      percentage = percentage.toFixed(0).toString() + ' %'; 
      console.log(percentage); 
      // userMessagesController.setMessage("loading... " + percentage); 
      checkFed(); 

      return; 

     } 

    //userMessagesController.setMessage(globals.defaultTitle); 
    } 
} 


if($('slideshow')){ 
var topdiv = '<div id="loading"><div class="centered"><img src="/karlaacosta/templates/templatename/images/ajax-loader.gif" /></div> </div>'; 
    $('#overall').append(topdiv); 
    //console.log('alerta'); 
    var jqxhr = $.post('http://localhost/karlaacosta/templates/templatename/php/newtest.php', function(data){ 



     var d = $.parseJSON(data); 
     //console.log(d[1]); 



     if(typeof(d) == 'object' && JSON.parse){ 
      var len = d.length; 
      //console.log(len); 



      for(var i = 0; i < len; i++){ 
       var theImage = new Image(); 
       var element = d[i].split('"'); 
       //  console.log(element); 
       //  console.log(element[4]); 
       theImage.src = '/karlaacosta/images/Fotografia/TODO'+element[0]; 
       theImage.width = element[2]; 
       theImage.height = element[4];     
       theImage.atrr = element[6]; 
       gAllImages.push(theImage); 

      } 





     // console.log(html); 
     }else{ 
      console.log('error'); 
     } 
    }).success(function(){ 




    setTimeout('checkFed', 150); 




    }).error(function(){ 
     var err = '<div id="error"><h2>Error: Lo sentimos al parecer no se pueden cargar las imagenes</h2></div>'; 
     $('#loading').append(err); 

    }).complete(
     function(){ 
      var len = gAllImages.length; 
      var html = '<ul class="slides">'  
      for(var i = 0; i < len; i++){ 
       html += '<li><img src="'+gAllImages[i].src+'" width="'+gAllImages[i].width+'" height="'+gAllImages[i].height+'" attr="'+gAllImages[i].attr+'" /></li>'; 


      } 
      html += '</ul>'; 
      $('#slideshow').append(html); 
     } 
     ); 
jqxhr.complete(function(){ 
    // 
    imageSlide(); 
    $('#loading').remove(); 
    // 
    console.log('completed'); 
}); 
} 

如果我拿出checkFed（）的遞歸性明顯，當圖像被放在HTML它們被加載罰款和快速劇本完成後，在高速緩存中從未被調入呢？代碼的其他部分的任何其他建議也受到歡迎。

Answer 1

我要檢查，如果每個圖像加載，然後在完成最後火其他功能和刪除一個div。但我不知道如何檢查如果圖像已經完全加載

從根本上說，檢查圖像加載成功很簡單：

var theImage = new Image(); 
var element = d[i].split('"'); 
$(theImage).load(function() { 
    // The image has loaded (from cache, or just now) 
    // ...do something with the fact the image loaded... 
}); 
theImage.src = '/karlaacosta/images/Fotografia/TODO'+element[0]; 

以上的關鍵是前勾load事件你設置了其src。如果您先設置了src，並且圖像處於緩存中，那麼load事件可能會在下一行代碼掛鉤之前觸發，您將錯過它。

---

下面是一個例子：Live copy | source

HTML：

<img src="http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG"> 
<p>When you see the image above, 
<input type="button" id="theButton" value="Click Me"></p> 

的JavaScript：

jQuery(function($) { 

    $("#theButton").click(function() { 
    var img = document.createElement('img'); 
    $(img).load(function() { 
     display("Image <code>load</code> event received"); 
    }); 
    img.src = "http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG"; 
    document.body.appendChild(img); 
    }); 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 
}); 

正如你所看到的，我使用的是在每種情況下相同的IMG src。並可靠地在我嘗試過的每個瀏覽器上，我做收到load事件。

Answer 2

由於瀏覽器緩存和事件模型的怪異，它無法以可靠的跨瀏覽器方式無插件。嘗試使用imagesLoaded或waitForImages。

https://github.com/desandro/imagesloaded

https://github.com/alexanderdickson/waitForImages