jQuery pre -loader ie-6/7问题

Question

我让这个jQuery预加载脚本在一个index.html页面上运行，在重定向到另一个页面之前加载了大约10Mb。

它在IE8/9 FF3+和Chrome上运行良好。但它在IE6/7中似乎不起作用，它似乎可以启动和运行，但永远不会触发最后一部分。

工作示例：-删除-

有人知道为什么它在ie6/7加载的75/76文件上卡住了吗？

<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

再次编辑:在再次阅读这篇文章后，我不确定缓存是否是您目前遇到的问题。如果你不检查它，它肯定会在以后出现，但它可能与你所遇到的问题无关。