Javascript 如何检查图像是否已加载？

使用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>';
});

var图像；
var load_image=new image（）；
load_image.onload=函数（）{
myphotosweep.show（0）；
}
$.each（图像['images']，函数（键，值）{
load_image.src=（'index.php？load_image='+值）；
$（“#图像_计数”）.remove（）；
$（'span[class=“load”]'）。之后（'Images:['+key+'/'+Images_数组['Images'].length+']）；
图像+='
'；
});

问题是，计数器总是在倒数第二个元素加载，并一直保持在那里，直到加载所有图像，但我需要显示每个图像的负载，就像一个进度

附言。 我也尝试了

complete

，但没有效果

你就快到了。 问题是您正在使用相同的图像对象。您需要创建一个load_映像实例数组，并在每个实例返回时在onload内递增计数器

函数加载（）{
var-imageurl=[]；
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图像=[]；
var i；
var计数器=0；
var mainDiv=document.getElementById（'somediv'）；
var counterDiv=document.getElementById（'counter'）；
对于（i=0；i

这应该可以解决它。原因是加载处理程序仅绑定到1个图像对象

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);
}

}); 

var图像；
$.each（图像['images']，函数（键，值）{
var load_image=new image（）；
load_image.src=（'index.php？load_image='+值）；
$（“#图像_计数”）.remove（）；
$（'span[class=“load”]'）。之后（'Images:['+key+'/'+Images_数组['Images'].length+']）；
图像+='
'；
load_image.onload=函数（）{
myphotosweep.show（0）；
}
}); 

用示例编辑了我的答案