2

我在页面上有大约四百张图片，我想在页面上加载图片时向用户显示图片的增量计数器。它在 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。

4

1 回答 1

1

在这里我认为问题是这个脚本在ready事件上被执行，但是一旦在 DOM 中找到图像就开始加载。

如果您可以以某种方式将所有图像的 src 更改为一个加载图像并将实际的 src 放在其他属性中，例如 data-src，则该问题应该解决。然后在准备好的事件中占用每张图片并加载图片，并从 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;
});
于 2013-08-29T06:19:01.660 回答