Internet Explorer, Loading Bar, 5.57MB page

Question

I have a sorta unique question. There is a web application which takes 5.57mbs of loading. I want a Loading Bar or Ajax Spinner on there that animates so they know things are progressing along during the ~10-20 seconds load time. Most is images, a lot of JS here too. The problem here is this, Firefox correctly threads everything so the animated gif keeps spinning. Animating. The world is happy. IE however loads the first few frames of the spinner, then stutter stops early and it does not do anything until the site is totally loaded. It also locks the browser on an uncached load. It will then show the page when loading is complete, however the spinner stops during the first frames whether it is cahced or uncached. (A cached load is only ~2-3 seconds) Again, it does not happen in Firefox, Safari or modern browsers except for IE. Is there a way to load IE nicely? Research has not came up with anything yet.

Loader Code (By Request): Note it is hard to paraphrase because of the large code base, however this seems to capture the dilemma.

<script type="text/javascript">
    function show_main_gui() {
        dojo.byId("splashloader").style.visibility = "hidden";
    }
    function init(){
     show_main_gui();
    }
    dojo.addOnLoad(init);
</script>
<style type="text/css">
#splashloader {
 position:absolute;
 z-index:999;
 width:800px;
 visibility:visible;
 height:600px;
 background:#fff;
 text-align:center;
 color:#1E4FD9;
}
</style>

<table id="splashloader"><tr><td><img src="images/interface/splashloader.gif"><span class="loader"> Loading...</span></td></tr></table>

A table... as it is easier to vertical align in all browsers.

IE 8 and 7 still persist with the loading gif animation freezing. If I change the spinner to be shown after load, the animation animates. I tried taking out all JavaScript calls other than this, and loading on cache, and it still only shows the first few frames in IE during the 1-2 second load.

Answer 1

try put this image within an iframe. this is what gmail developers used do with that red "loading..." label in previous versions

Answer 2

You could load the content dynamically in javascript, and use your preferred technique of updating a status/progress thing. The easies is maybe to use the browser status text, but you could of course also use an area on the page to show animation and/or status.

<script id="postLoadJavascript" type="text/javascript" ></script>

<script type="text/javascript">
  var imagesLoaded = 0;
  var totalImages = 100;
  for(imagesLoaded = 0; imagesLoaded < totalImages; imagesLoaded++){
    window.status = 'Loading image ' + imagesLoaded + ' of ' totalImages + '...';
    document.write('<img src="image' + imagesLoaded  +'.gif" /> ');
  }
  window.status = 'Loading additional javascript...';
  document.getElementById('postLoadJavascript').src = "theAdditionalJavascript.js"
  window.status = 'Finished loading all.';

</script>

Answer 3

That is a bug with animated gifs in IE. Change from an animated gif to use javascript to animate the loader thing... (e.g. by swapping images or similar)