如何檢查圖像是否已加載？

Question

與ajax我得到一個圖片的URL數組，然後我需要從他們創建的畫廊。我也需要做出一個計數器，顯示下載圖像的數量，它看起來像這樣：

var images; 
var load_image = new Image(); 
load_image.onload = function(){ 
    myPhotoSwipe.show(0); 
} 
$.each(images['images'], function(key, value) { 
    load_image.src = ('index.php?load_image=' + value); 
    $('#image_count').remove(); 
    $('span[class="loading"]').after('<div id="count"><h6>Images: ['+key+'/'+images_array['images'].length+']</h6></div>'); 
    images+= '<li><a href="index.php?load_image='+value+'"><img src="index.php?load_image='+value+'" /></a></li>'; 
}); 

的問題是，計數器總是被加載在倒數第二個元素，呆在那裏，直到所有的圖像加載，但我需要顯示每個進程的負載。

P.S. 我也試過complete，但它沒有幫助。

Answer 1

你快到了。 問題是您正在重新使用相同的圖像對象。你需要創建一個load_image實例的數組，並在onload中增加你的計數器，當他們每個返回。

  function load(){ 
       var imageUrls = []; 
       imageUrls.push('http://www.nasa.gov/images/content/690106main_iss033e005644_full.jpg'); 
       imageUrls.push('http://www.nasa.gov/images/content/690669main_201209210010_full.jpg'); 
       imageUrls.push('http://www.nasa.gov/images/content/691806main_hs3_full_full.jpg'); 
       imageUrls.push('http://www.nasa.gov/images/content/689231main_Webb_Mirror_Cans_orig_full.jpg'); 
       var images = []; 
       var i; 
       var counter = 0; 
       var mainDiv = document.getElementById('somediv'); 
       var counterDiv = document.getElementById('counter'); 

       for (i = 0; i < imageUrls.length; i++) 
       { 
        images[i] = new Image(); 
        images[i].width = 100; 
        images[i].height = 100; 
        images[i].onload = function() { 
         counter++; 
         counterDiv.innerText = counter; 
        } 
        mainDiv.appendChild(images[i]); 
        images[i].src = imageUrls[i]; 
       } 
      } 

Answer 2

這應該解決它。原因是因爲負載處理程序僅綁定到一個圖像對象。

var images; 


$.each(images['images'], function(key, value) { 
var load_image = new Image(); 

load_image.src = ('index.php?load_image=' + value); 

$('#image_count').remove(); 

$('span[class="loading"]').after('<div id="count"><h6>Images: ['+key+'/'+images_array['images'].length+']</h6></div>'); 
images+= '<li><a href="index.php?load_image='+value+'"><img src="index.php?load_image='+value+'" /></a></li>'; 

load_image.onload = function(){ 
    myPhotoSwipe.show(0); 
} 

});