View Full Version : loader for loading a very slow page

09-19-2005, 09:12 AM
Does anyone know a smart javascript way to make a small piece of text or (a graphic would do) appear on a very slow loading page while it is loading - then disappear once the page is loaded? I've searched around and most solutions don't seem to work very well.

The page actually contains around twenty or so wav files which take a while to cache.

(Yes, I know I can reduce the size of the wav files by compressing as MPEG4 or MP3 etc., but for reasons of no interest here, that is not convenient.)



09-19-2005, 10:53 AM
Right after the <body> tag (before anything else) place the following:

<span ID="LOAD" Name="LOAD" style="color:black">Loading...</span>
<DIV ID="oContainer" STYLE="display:none">

At the very end of the webpage, before </body> (after everything else) place the following:


09-19-2005, 11:29 AM
Works like a charm - can't think why it isn't all over the place...

Thanks again.

09-19-2005, 12:22 PM
If javascript is disabled or not supported, the page will be empty.

Try this:

<span id="LOAD" style="color:black; display:none;">Loading...</span>
<script type="text/javascript">
//show loading message
<div id="oContainer">
<script type="text/javascript">
//hide content

...content here

<script type="text/javascript">
document.getElementById("oContainer").style.display="block"; //show content
document.getElementById("LOAD").style.display="none"; //hide loading message
By default, the loading message is hidden and the content is shown. Therefore if javascript is disabled or not supported, the user will still see the content.

10-03-2005, 10:10 AM
Would there be a way to add an animated progress bar.gif to this seemingly static page loader? It doesn't work because any animation I have tried only displays the first frame and stops while the page is loading.

BTW, this also works - without javascript though:


<DIV ID="slowScreenSplash" STYLE="position:absolute;z-index:5;top:217px;left:121px;">
<b>Please wait while the page is loading...</b></DIV>



document.all["slowScreenSplash"].style.display = "none";

I found it online. And while the guy who wrote it discusses .gif animations in regard to the above script, it also has the look of a static "page" before the page has loaded. They just don't seem to work.

Any ideas anyone?


10-03-2005, 10:48 PM
1. document.all is for Internet Explorer 4 which no one uses any more. More recent browsers use document.getElementById

2. Why take a slow loading page and make it even slower by adding to the code. Better that you redesign your site so as to not have slow loading pages.

10-04-2005, 12:50 PM
If I promise not to use any other other browser but IE (and I am willing to take the flak) can I use the 'document.all' method and still feel I have a life?

Must I use the 'document.getElementById' method? It doesn't always work on all of my pages, but 'document.all' does. (Isn't life a pain?)

You see, the project I am on will never, ever want to involve firefox or netscape users - for reasons that are uninteresting, but not an indication that I love IE.

You see, this will not be up there online...