使用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>';
});问题是计数器总是在倒数第二个元素上加载,并一直留在那里,直到所有图像都加载完,但我需要像进度一样显示每个图像的加载。
另外,我也试过complete,但没有用。
发布于 2012-10-01 13:46:56
你就快到了。问题是您正在重用相同的图像对象。您需要创建一个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];
}
}发布于 2012-10-01 14:03:48
这个应该可以解决这个问题。原因是因为加载处理程序仅绑定到一个图像对象。
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);
}
}); https://stackoverflow.com/questions/12668014
复制相似问题