Проблема с IE, не вызывающим функцию JQuery .load () при обновлении страницы - связано с кэшированием изображений

Question

Это заставляет меня чесать голову ...

Работая на клиентском сайте, они попросили быстрый экран-заставку. Это должно циклически проходить через пару изображений (последним из которых является их логотип), затем исчезать, а главная страница исчезает.

Я нашел код на http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/, который отлично работает на FF, но вызывает проблемы с IE7.

В IE7 заставка циклически повторяется, пока не дойдет до последнего изображения, затем останавливается - он не исчезает на главной странице, он просто сидит там. Если я нажму (что пропускает всплеск и исчезает на главной странице), это работает, поэтому скрипт не зависает. После игры я обнаружил, что именно этот файл - logo-final.gif - вызывает зависание.

Короче говоря, это кажется противоречивым, потому что я использую logo-final.gif на главной странице, чтобы показать логотип. Если я сделаю копию logo-final.gif и назову ее logo-5.gif или как-то еще, это сработает. Если я уберу тег img, вызывающий logo-final.gif, с главной страницы, это сработает. Но если я попытаюсь загрузить logo-final.gif на главной странице и вызвать его в сценарии, это не сработает.

Это просто странная ошибка IE7? Есть обходные пути? Я могу обойти это, скопировав изображение логотипа и вызвав новое имя файла в скрипте, но что за пустая трата пропускной способности (пусть и крошечной), просто чтобы потаскать свой дурацкий IE7. Примечание. Я не тестировал ни в одном другом браузере, кроме FF 3.6.15 и IE 7.0.5731.11, поскольку сейчас я на компьютере-заемщике ...

Спасибо за любую помощь!

Сценарий и HTML ниже:

JQuery:

(function($){

$.fn.splashScreen = function(settings){

    settings = $.extend({

        imageLayers: [],
        imageShowTime: 700
    },settings);

    var splashScreen = $('<div>',{
        id: 'splashScreen',
        css:{
            height: $(document).height()+100
        }
    });

    $('body').append(splashScreen);
    splashScreen.click(function(){
        splashScreen.fadeOut('slow');
    });

    splashScreen.bind('changeImage',function(e,newID){

        if (settings.imageLayers[newID]){
            showImage(newID);
        } else {
            splashScreen.click();
        }
    });

    splashScreen.trigger('changeImage',0);

    function showImage(id) {
        var image = $('<img>',{src:settings.imageLayers[id]}).hide();

        image.load(function(){
            image.fadeIn('slow').delay(settings.imageShowTime).fadeOut('slow',function(){
image.remove();
                splashScreen.trigger('changeImage',[id+1]);
        });
    });

splashScreen.append(image);
}


return this;
}
})(jQuery);

HTML (в заголовке):

<script type="text/javascript" src="scripts/jquery.1.5.1.js"></script>
<script type="text/javascript" src="scripts/splashScreen.js"></script>

<script type="text/javascript">
$(document).ready(function(){
     $('#logo').splashScreen({
     imageLayers : [
     'images/splash-1.gif',
     'images/splash-2.gif',
     'images/splash-3.gif',
     'images/logo-final.gif'
     ]
     });
});
</script>

И тег img в теле главной страницы, который, кажется, вызывает конфликт:

<h1><a href="index.html"><img src="images/logo-final.gif" alt="logo" /></a></h1>

Кроме того, обнаруженная демоверсия оригинального урока также испытывает проблему. Чтобы увидеть это, перейдите к http://demo.tutorialzine.com/2010/11/apple-style-splash-screen-jquery/ - заставка должна нормально работать с первого раза, но если вы обновите (F5) в IE, он должен зависнуть после того, как исчезнет первое изображение.

Answer 1

простым решением было бы добавить запрос к «статическому» изображению в html, например:

<img src="images/logo-final.gif?v=a" alt="logo" />

Но это будет использовать «дополнительную» полосу пропускания.

Answer 2

ОК - я вернулся домой и проверил IE8 и обнаружил ту же проблему. Отладка показала, что image.load () не вызывался при кэшировании изображения, что вызывало как мою первоначальную проблему (поскольку img была загружена на главной странице), так и проблему с обновлением. Решение было найдено по адресу http://css -tricks.com / snippets / jquery / fixing-load-in-ie-for-cached-images /

Я изменил описание изображения и функцию .load на приведенные ниже, и все, кажется, работает!

var image = $("<img />")
   .attr("src",settings.imageLayers[id]+ "?" + new Date().getTime());
image.hide();

image.load(function(){
    image.fadeIn('slow').delay(settings.imageShowTime).fadeOut('slow',function(){
        image.remove();
        splashScreen.trigger('changeImage',[id+1]);  
    });
});

Я ненавижу IE! :)