jQuery pre -loader ie-6/7 issue

Question

Я получил этот сценарий предварительной загрузки jQuery, запущенный на странице index.html, загружающей около 10 Мб, прежде чем перенаправлять на другую страницу.

Он отлично работает в IE8/9 FF3 + и Chrome. Но, похоже, он не работает в IE6/7, он, кажется, запускается и запускается, но никогда не запускает последнюю часть.

Рабочий пример: -removed-

Любой знает, почему он застревает на 75/76 загруженных файлов в IE6/7?

<script src="js/jquery-1.7.1.min.js"></script> 
<script> 
    (function($) { 
var imgList = []; 
$.extend({ 
    preload: function(imgArr, option) { 
     var setting = $.extend({ 
      init: function(loaded, total) {}, 
      loaded: function(img, loaded, total) {}, 
      loaded_all: function(loaded, total) {} 
     }, option); 
     var total = imgArr.length; 
     var loaded = 0; 

     setting.init(0, total); 
     for (i = 0; i < imgArr.length; i++) { 
      imgList.push($("<img />") 
       .load(function() { 
        loaded++; 
        setting.loaded(this, loaded, total); 
        if(loaded == total) { 
         setting.loaded_all(loaded, total); 
        } 
       }) 
       .attr("src", imgArr[i]) 
      ); 
     } 
    } 
}); 
})(jQuery); 

$(function() { 
$.preload([ 
"http://www.erikderuiter.nl/images/300x300-transparent.png", 
"http://www.erikderuiter.nl/images/300x300.png", 
"http://www.erikderuiter.nl/images/300x600.png", 
"http://www.erikderuiter.nl/images/600x300.png", 
"http://www.erikderuiter.nl/images/600x600.png", 
"http://www.erikderuiter.nl/images/900x300.png", 
], { 
    init: function(loaded, total) { 
     $("#indicator").html("Files: "+loaded+"/"+total); 
    }, 
    loaded: function(img, loaded, total) { 
     $("#indicator").html("Files: "+loaded+"/"+total); 
     $("#full-screen").append(img); 
    }, 
    loaded_all: function(loaded, total) { 
     $("#indicator").html("Loading: Done!"); 
     window.location.replace("http://www.erikderuiter.nl/somepage.html"); 
    } 
}); 
}); 
</script> 

<div id="indicator"></div> 

Любые другие советы или рекомендации по предварительной загрузке изображений на странице также приветствуются, конечно.

Answer 1

Вам необходимо также проверить, если изображение уже кэшировано.

var img = new Image(); 
img.src = "foo.jpg"; 
if (img.complete || img.readyState === 4) { 
    // image is cached 
} 
else { 
    $(img).bind("load error onreadystatechange",function(e){ 
     // image is loaded 
    }); 
} 

Если есть 404 ошибка на одном из изображений, вам нужно будет поймать, что с setTimeout и clearTimeout.

Редактировать: Только примечание перед тем, как я получаю бомбардировку для использования .bind: Я по-прежнему использую .bind в плагинах для обратной совместимости.

Вот пример описанного выше способа: https://github.com/tentonaxe/jQuery-preloadImages/blob/master/jquery.preloadimages.js

Редактировать снова: После прочтения этого снова, я не уверен, если кэширование проблема вы имеете в данный момент. Это определенно то, что может возникнуть позже, если вы не проверите его, но это может быть не связано с проблемой, с которой вы сталкиваетесь.