CODEWITHSUNDEEP
jqueryinternet-explorer-7image
Jim
Jim

Reputation: 2300

Issue with IE not calling JQuery .load() function on page refresh - traced to image caching

This one has me scratching my head...

Working on a client site, they asked for a quick splash screen. This should cycle through a couple of images (the last one being their logo), then fade out and the main page fades in.

I found some code over at http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/ which works fine on FF, but is causing problems with IE7.

In IE7, the splash screen cycles until it gets to the last image, then stops - it does not fade out to the main page, it just sits there. If I click (which skips the splash and fades to the main page), it works, so the script isn't hung. After playing around, I found it was that particular file - logo-final.gif - which was causing the hang.

Long story shorter, it seems to be conflicting because I use logo-final.gif in the main page to show the logo. If I make a copy of logo-final.gif and call it logo-5.gif or whatever, it works. If I remove the img tag calling logo-final.gif from the main page, it works. But if I try and load logo-final.gif on the main page AND call it in the script, it doesn't work.

Is this just a weird IE7 bug? Any workarounds? I can get around it by copying the logo image and calling the new filename in the script, but what a waste of bandwidth (albeit tiny) just to coddle ol' craptastic IE7. Note - I've not tested in any other browsers than FF 3.6.15 and IE 7.0.5731.11 since I am on a loaner computer right now...

Thanks for any help!

Script and HTML below:

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 (in HEAD):

<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>

And the img tag in the main page body which seems to be causing the conflict:

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

Also, found the demo of the original tutorial also experiences the problem. To see it, go to http://demo.tutorialzine.com/2010/11/apple-style-splash-screen-jquery/ -- the splashscreen should work fine the first time, but if you refresh (F5) in IE it should hang after the first image fades out.

Upvotes: 0

Views: 1303

Answers (2)

jackJoe
jackJoe

Reputation: 11148

a simple solution would be to add a query to the "static" image at the html, like:

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

But this will use "extra" bandwidth.

Upvotes: 1

Jim
Jim

Reputation: 2300

OK - I got home and tested on IE8 and found the same issue. Debugging showed that image.load() was not being called when the image was cached - causing both my original problem (since img was loaded on main page) and my refresh issue. Solution was found at http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

I changed the image declaration and .load function to the below, and all seems to be working!

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]);  
    });
});

I hate IE! :)

Upvotes: 1

Related Questions