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 2 of 2
  1. #1
    Regular Coder DR.Wong's Avatar
    Join Date
    Jan 2005
    Posts
    360
    Thanks
    23
    Thanked 1 Time in 1 Post

    Show loader image while page database works

    Hey guys,

    I think this is the right place to post this. The page I'm using is serverside but the result I need is client side.

    I have a really big database, and a certain page that does an intense query on said database.

    The page is generated by php (by just inserting html table rows to the page in a while loop to display results from the database).

    The problem is that the page takes a while to load while the processing is being done.

    Is there a way, in javascript, to show a little "PAGE LOADING" thing while the page loads and then when the page is loaded, make it dissapear.

    So when the page is accessed, the page loading must be shown, and then body onload="make it dissapear"

    I was thinking of using a moodal box or something along the lines so i can easily code the alert that I want floating on top of the page.

    I guess the question i should ask is, how do I call a js script when the page is accessed and another call when the page loads?
    -DR.Wong

    Wheres the food at?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by DR.Wong View Post
    I guess the question i should ask is, how do I call a js script when the page is accessed and another call when the page loads?
    You can't. There is no reliable way to tell when a page has completely loaded in the user's browser. The best you can do is to estimate the time required to load (not easy with broadband and dial-up) and then use the following script:-

    Code:
    <body onload = "showLoad()">
    <style>
    .styling{
    background-color:black;
    color:red;
    font: bold 24px MS Sans Serif;
    padding: 6px;
    }
    </style>
    
    <br><br>
    <center>
    <span id = "a" class = "styling"></span>
    </center>
    
    <script type = "text/javascript">
    var num = 0;  
    var tim;
    var txt = "Loading, please wait ........";
    document.getElementById("a").innerHTML = txt;
    function showLoad() {
    num ++;
    if (num == 5) {  // erase after 5 seconds, adjust to suit
    document.getElementById("a").style.display="none";
    window.clearTimeout(tim);
    }
    else {
    tim = window.setTimeout("showLoad()", 1000);
    }
    }
    </script>

    See also page load progress bar


    Sign in launderette:-
    AUTOMATIC WASHING MACHINES: PLEASE REMOVE ALL YOUR CLOTHES WHEN THE LIGHT GOES OUT


  •  

    Posting Permissions

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