Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts

    loader for loading a very slow page

    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

  • #2
    TNO
    TNO is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    213
    Thanks
    2
    Thanked 1 Time in 1 Post
    Right after the <body> tag (before anything else) place the following:

    Code:
    <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:

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

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    Works like a charm - can't think why it isn't all over the place...

    Thanks again.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,950
    Thanks
    0
    Thanked 236 Times in 233 Posts
    If javascript is disabled or not supported, the page will be empty.

    Try this:

    Code:
    <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.

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    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

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,458
    Thanks
    0
    Thanked 632 Times in 622 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •