图像readyState总是“加载”

Question

我正在加载一组图像，并使用jQuery测试它们何时完成。但是，1图像会显示替代文本。我认为没什么大不了的，只是测试一下错误，但这个错误永远不会被抛出。在进一步检查后，我发现readyState仍然被认为是“正在加载”。我不知道该怎么解决这个问题。

myCode

 $(document).ready(function(){
     setTimeout(evalImages,100);
});
$('img').error(function(){ alert('test'); });

function evalImages(){
     var imgCount = $('.myContainer img').length;
     var loaded=0;
     for(var i =0; i < imgCount; i++){
         if($('.myContainer img').get(i).complete){
              loaded++;
         }
     }
     if( loaded >= imgCount){
           ///My other logic here
     }else setTimeout(evalImages,100);
}

就为了这张图片，我打开了我的开发工具，并完成了

 $('.myContainer img').get(7).readyState
"loading"

由于它仍然在加载，从来没有完成，也没有错误，我不知道如何测试这个问题。

更新:我仍然不知道为什么这一个图像没有改变它的readyState，我很好奇，但作为一个变通办法，我只是在400毫秒的时间延迟后显示所有图像。

Answer 1

您可以使用load事件

$(window).on('load', function(){ // ... });

或者，快捷方式

$(window).load(function(){ // ... });

load事件在所有图像完全加载后触发，而不是$(document).ready。此外，如果需要，您可以同时使用ready和load，ready事件将在load之前触发。

Answer 2

此错误存在于IE9和IE10中。一个简单的解决方法是在将img.readyState插入到DOM之后立即执行一个虚拟的img读取。

IE9-IE10-STALE-READYSTATE.html

IE9-IE10-STALE-READYSTATE.html?ie9-ie10-fix

IE11显示的错误是F12调试器模拟IE9，IE10与实际的IE9，IE10不同。