我在页面上有大约四百张图像，我想向用户显示图像在页面上加载时的增量计数器。它在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函数更新了屏幕上的值，但是无论我使用哪种方法，我仍然会得到相同的结果：
Firefox，它可以工作。Chrome，它可以正常工作，但与应加载到页面上的图像的真实数量相比，要少十五到二十个（464）。IE，$colThree.html('<strong>'+imgCount+'</strong>');直到所有图像完全加载后才显示计数更新，因此它处于空白状态，然后显示464。
在这里，我认为问题在于此脚本在ready事件上执行，但是图像一旦在DOM中找到就开始加载。
如果您可以以某种方式将所有图像的src更改为一个加载图像，并将实际的src放在其他一些属性（例如data-src）中，则该问题应该得到解决。然后在ready事件中占用每个图片，并使用data-src属性中的url加载图片。当其完全加载到JS ser图片的url中时。
$('img').each(function(){
var src = $(this).data('src');
var img = new Image();
img.load = function(){
/*increase count here and set the src of the DOM img element*/
};
img.src = src;
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句