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

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

});

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

2 个答案: