我在页面上有大约四百张图片,我想在页面上加载图片时向用户显示图片的增量计数器。它在 Firefox 中运行良好,但我在使用 IE 和 Chrome 时遇到了问题。
var increment ={
start: function(){
$updateThree = $('.container').children('img').length;
increment.countImagesLoading();
getCount = setInterval(increment.updateImagesLoading,100);
},//end function
countImagesLoading:function(){
imgCount = 0;
$img = $('.container').children('img');
$img.one('load',function() {
imgCount++;
});
},
updateImagesLoading: function(){
$colThree.html('<strong>'+imgCount+'</strong>');
if(imgCount == $updateThree){
clearInterval(getCount);
//end the interval because all the images are loaded!
}
},
}
$(document).ready(increment.start);//document.ready
我还删除了间隔和调用updateImagesLoading
,只是让countImagesLoading
函数使用每个 .load 函数更新屏幕上的值,但无论我使用哪种方法,我仍然得到相同的结果:
火狐,它的工作原理。Chrome,它可以工作,但最终与应该在页面上加载的图像的真实数量 (464) 相比少了 15 到 20 个。IE,$colThree.html('<strong>'+imgCount+'</strong>');
直到所有图像完全加载后才显示计数更新,因此它处于空白状态,然后显示 464。