title: Issue with IE not calling JQuery .load() function on page refresh - traced to image caching
body: <p>This one has me scratching my head...</p>
  
  <p>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.</p>
  
  <p>I found some code over at <a href="http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/" rel="nofollow">http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/</a> which works fine on FF, but is causing problems with IE7.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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...</p>
  
  <p>Thanks for any help!</p>
  
  <p>Script and HTML below:</p>
  
  <p>JQuery:</p>
  
  <pre><code>(function($){
  
  $.fn.splashScreen = function(settings){
  
      settings = $.extend({
  
          imageLayers: [],
          imageShowTime: 700
      },settings);
  
      var splashScreen = $('&lt;div&gt;',{
          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 = $('&lt;img&gt;',{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);
  </code></pre>
  
  <p>HTML (in HEAD):</p>
  
  <pre><code>&lt;script type="text/javascript" src="scripts/jquery.1.5.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="scripts/splashScreen.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
       $('#logo').splashScreen({
       imageLayers : [
       'images/splash-1.gif',
       'images/splash-2.gif',
       'images/splash-3.gif',
       'images/logo-final.gif'
       ]
       });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And the img tag in the main page body which seems to be causing the conflict:</p>
  
  <pre><code>&lt;h1&gt;&lt;a href="index.html"&gt;&lt;img src="images/logo-final.gif" alt="logo" /&gt;&lt;/a&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>Also, found the demo of the original tutorial also experiences the problem. To see it, go to <a href="http://demo.tutorialzine.com/2010/11/apple-style-splash-screen-jquery/" rel="nofollow">http://demo.tutorialzine.com/2010/11/apple-style-splash-screen-jquery/</a>  -- the splashscreen should work fine the first time, but if you refresh (F5) in IE it should hang after the first image fades out.</p>