Не удается заставить предварительную загрузку изображения работать правильно в IE8

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

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

Есть несколько способов перейти к следующему изображению: щелкнув большое изображение, выбрав конкретный большой палец, используя значки со стрелками или даже стрелки на клавиатуре. Все они в основном вызывают функцию 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), но это тоже не дало результата. Я застрял в отладке и понял, почему это работает с первого раза.


person Fer    schedule 11.02.2011    source источник
comment
Попробуйте сначала назначить обработчик load. И после установки значения .src   -  person zxcat    schedule 13.07.2013


Ответы (1)


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

См. $.fn.imagesLoaded jQuery plugin.

person Neil    schedule 11.02.2011
comment
Похоже вы правы, спасибо! Я проверю предложения в этой теме, чтобы увидеть, есть ли способ обойти это. - person Fer; 11.02.2011
comment
Это сработало из коробки! Я просто заменил load на imagesLoaded - person Fer; 11.02.2011
comment
Только что посмотрел на веб-страницу - отличные фотографии, надеюсь, у вас скоро все заработает. - person Neil; 11.02.2011
comment
Спасибо, это сообщество фотографов дикой природы под названием JungleDragon, выпустит его к концу квартала. - person Fer; 11.02.2011