javascript - 如何检查图像是否加载？

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

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

PS我也试过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

这应该解决它。原因是负载处理程序仅绑定到 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);
}

});