...

View Full Version : loader for loading a very slow page



tpeck
09-19-2005, 08: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.)

Thanks,

Terry

TNO
09-19-2005, 09: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:


</div>
<script>
document.all.LOAD.style.display="none";
document.getElementById('oContainer').style.display="block";
</script>

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

Thanks again.

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

Try this:


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

...content here

</div>
<script type="text/javascript">
document.getElementById("oContainer").style.display="block"; //show content
document.getElementById("LOAD").style.display="none"; //hide loading message
</script>
</body>
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.

tpeck
10-03-2005, 09: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:

TOP:

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

***************

BOTTOM:

<script>
document.all["slowScreenSplash"].style.display = "none";
</script>
</body>

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?

Terry

felgall
10-03-2005, 09: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.

tpeck
10-04-2005, 11:50 AM
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...

Terry



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum