Databases
StackOverflow2013
Postsdbo
POIssue with IE not calling JQuery .load() function on page refresh - traced to image caching
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIssue with IE not calling JQuery .load() function on page refresh - traced to image caching
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJim
    1. USJim
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI have no idea, my only thought was to add a query to one of the duplicates like `<img src="images/logo-final.gif?v=a" alt="logo" />` this would obviously waste extra bandwidth, at least once, so not really an answer for you.
      singulars
      1. POIssue with IE not calling JQuery .load() function on page refresh - traced to image caching
      1. USjackJoe
    2. COAt least I'm not going crazy, right?
      singulars
      1. POIssue with IE not calling JQuery .load() function on page refresh - traced to image caching
      1. USJim
    3. COHere's some more strangeness: I've renamed the file used by the script to "splash-4.gif" as a temp workaround. Loading the page from a new IE7 windows = success. HOWEVER, if I hit F5 to refresh, the page loads, it fades in the first image, fades it out, then STOPS. Same behavior, clicking triggers the click action so it's not hung, but it doesn't load the second image for some reason!
      singulars
      1. POIssue with IE not calling JQuery .load() function on page refresh - traced to image caching
      1. USJim
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload