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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Loading page script?

    Is there a way to displaying "Loading page, please wait" while the entire page is loading? I've found some page preloaders however all of them show "Loading page, please wait" on a blank page until the page is loaded. Is it possible to show this message on a page and have the content load around it?

    Ash

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, that's easy ...

    just put an element at the very beginning of the document, just after the body tag, the text of which is your loading message. then, after the body tag insert a script which goes something like this:

    <script type="text/javascript">

    window.onload
    {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("id_of_loading_message_tag"));
    }

    </script>
    *keep it simple (TM)

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, here's what I have thus far:

    Code:
    </head>
    
    <body>
    
    <script type="text/javascript">
    
    window.onload
    {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("loadingMSG"));
    }
    
    </script>
    
    <div id="loadingMSG" style="position:absolute; left:100px; top:4px"> 
    Loading page, please wait...</div>
    The message does not disappear. What am I doing wrong?

    Ash

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AshleyQuick
    Code:
    </head>
    
    <body>
    
    <script type="text/javascript">
    
    window.onload
    {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("loadingMSG"));
    }
    
    </script>
    
    <div id="loadingMSG" style="position:absolute; left:100px; top:4px"> 
    Loading page, please wait...</div>

    do it this way:

    Code:
    </head>
    
    <body>
    
    <div id="loadingMSG" style="position:absolute; left:100px; top:4px"> 
    Loading page, please wait...</div>
    
    </body>
    <script type="text/javascript">
    
    window.onload
    {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("loadingMSG"));
    }
    
    </script>
    </html>
    *keep it simple (TM)

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like a charm! Thank you!

    Ash

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    Can this be modified to use in a page that contains an iframe so that the iframe content must load as well before the message disappears?

  • #7
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmmm, yes, prolly, with a little massaging.

    in the iframe, put this at the end of the document:

    PHP Code:
    <script>
    window.onload
    {
         
    top.checkIfLoaded();
    }
    </script> 
    then in main page, put this at the end of the document:

    PHP Code:
    <script>
    window.onload
    {
         
    checkIfLoaded();
    }
    </script> 
    then in main page, put this in the head of the document:

    PHP Code:
    <script type="text/javascript">

    var 
    pageCounter=0totalPages=2;

    function 
    checkIfLoaded()
    {
         
    pageCounter++;

         if (
    pageCounter==totalPagesdocument.getElementsByTagName("body")[0].removeChild(document.getElementById("loadingMSG"));
    }

    </script> 
    Last edited by jbot; 11-12-2004 at 09:49 AM.
    *keep it simple (TM)

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice work! Thank you immensely!


  •  

    Posting Permissions

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