Не удается настроить предварительную загрузку изображений для корректной работы в IE8 - PullRequest
1 голос
/ 11 февраля 2011

Я работаю над слайд-шоу изображений, которое позволяет пользователям циклически просматривать набор изображений в полу-полноэкранном режиме.Вот его версия для разработки:

[ссылка удалена, была только временная ссылка]

Существует несколько способов перехода к следующему изображению: щелкнув большое изображение, выбрав определенный большой палец, используя значки со стрелками или даже стрелки клавиатуры.Все они в основном вызывают js-функцию loadImage с правильными параметрами:

    function loadImage(id,url) {

        // general image loading routine

        // enable loader indicator
        $("#loading").toggle();

        var imagePreloader = new Image();
        imagePreloader.src = url;
        loading = true;
        $(imagePreloader).load(function() {

            // load completed, hide the loading indicator
            $("#loading").toggle();

            // set the image src, this effectively shows the image
            var img = $("#bigimage img");
            img.attr({ src: url });

            // reset the image dimensions based upon its orientation
            var wide = imagePreloader.width >= imagePreloader.height;
            if (wide) {
                img.addClass('wide');
                img.removeClass('high');
                img.removeAttr('height');
            } else {
                img.addClass('high');
                img.removeClass('wide');
                img.removeAttr('width');
            }

            // update thumb status
            $(".photos li.active").removeClass('active');
            $("#li-" + id).addClass('active');

// get the title from the active thumb and set it on the big image
var imgTitle = $("#li-" + id + " a").attr('title');
log(id + ":" + imgTitle);
        $(".caption h1").text(imgTitle);

        // loading routine completed
        loading = false;

        //return true;
        });
}

Там есть много вещей, не имеющих отношения к вопросу, но основное внимание уделяется фактической предварительной загрузке и отображению запрошенного изображения,Целое прекрасно работает как в Firefox, так и в Chrome, но в IE8 ничего не происходит.Как ни странно, это работает, когда я в первый раз нажимаю на следующую стрелку или использую стрелку на клавиатуре, после этого она просто терпит неудачу.

Мне трудно отлаживать это.Пошагово просматривая код, я вижу, что обработчик события загрузки на самом деле никогда не вызывается, несмотря на то, что переданный URL-адрес верен.Я пытался с imagePreloader.onLoad (без jQuery), но это также не имеет никакого эффекта.Я застрял, отлаживая это и понимая, почему это работает в первый раз.

1 Ответ

3 голосов
/ 11 февраля 2011

Похоже, это связано с кэшированием изображений. В некоторых случаях .load() не запускает обработчик событий, когда изображение кэшируется в кэше вашего браузера. Смотрите этот пост по этому вопросу.

См. $.fn.imagesLoaded jQuery plugin.

...