在使用Javascript加载到Chrome中时，如何计算图像的数量？

我在一个页面上有大约400个图像，我想向用户显示图像加载到页面上时的增量计数器。它在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

var增量={
开始：函数（）{
$updateThree=$（'.container'）.children（'img'）.length；
increment.countImagesLoading（）；
getCount=setInterval（increment.updateImagesLoading，100）；
}，//结束函数
countImagesLoading:函数（）{
imgCount=0；
$img=$（'.container'）.children（'img'）；
$img.one（'load'，function（）{
imgCount++；
});
},
updateImagesLoading:函数（）{
$colThree.html（“”+imgCount+”）；
if（imgCount==$updateThree）{
clearInterval（getCount）；
//结束间隔，因为所有图像都已加载！
}
},
}
$（文档）.ready（增量.start）//准备好了吗

我还删除了间隔和对

updateImagesLoading

的调用，并让

countImagesLoading

函数用每个.load函数更新屏幕上的值，但无论使用哪种方法，我仍然得到相同的结果：

Firefox，它可以工作。 Chrome，它可以工作，但最终与页面上应该加载的图像的真实数量（464）相差15到20。

---

即，不通过

$colThree.html（“”+imgCount+”）显示计数更新直到所有图像都被完全加载，所以它是空白的，然后显示464。
这里我认为问题是这个脚本在
ready
事件中被执行，但是一旦在DOM中找到图像，就开始加载

如果您能够以某种方式将所有图像的src更改为一个加载图像，并将实际src放入其他属性（如data src）中，那么问题应该得到解决。然后，在ready事件上，获取每个pic，并从datasrc属性中获取url加载pic。当它在JSSER中完全加载时，将显示pic的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;
});