jQuery pre -loader ie-6/7 выпуск - PullRequest
Новая
       24

jQuery pre -loader ie-6/7 выпуск

1 голос
/ 03 апреля 2012

Я получил этот скрипт предварительной загрузки 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>

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

1 Ответ

1 голос
/ 03 апреля 2012

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

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 и * 1005.*.

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

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

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

...