首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何检查镜像是否加载?

如何检查镜像是否加载?
EN

Stack Overflow用户
提问于 2012-10-01 13:41:04
回答 2查看 97关注 0票数 0

使用ajax,我得到了一个图片URL数组,然后我需要从它们创建图库。我还需要做一个计数器来显示下载图片的数量,它看起来像这样:

代码语言:javascript
复制
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,但没有用。

EN

回答 2

Stack Overflow用户

发布于 2012-10-01 13:46:56

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

代码语言:javascript
复制
            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];
                }
            }
票数 0
EN

Stack Overflow用户

发布于 2012-10-01 14:03:48

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

代码语言:javascript
复制
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);
}

}); 
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12668014

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档