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
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Displaying a gif before a page loads for a fixed amount of seconds

    Hi all,

    I want to implement this on my website: http://article.onlinewebtool.com/sho...cript-and-css/

    However, I don't want the loading gif to just display until the page loads. I want the gif to display for a fixed amount of time.

    So, for example, if I want that loading gif to display for 15 seconds before the page is displayed, how do I do that?

    Thanks.

  • #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 DanCorb View Post
    Hi all,

    I want to implement this on my website: http://article.onlinewebtool.com/sho...cript-and-css/

    However, I don't want the loading gif to just display until the page loads. I want the gif to display for a fixed amount of time.

    So, for example, if I want that loading gif to display for 15 seconds before the page is displayed, how do I do that?

    Thanks.
    Use setTimeout() to hide the image after 15 seconds.
    And then reveal the rest of the page.
    Code:
    <body onload = "setTimeout(hideshow,15000)"> 
    
    <div id = "loading" style="display:block">
    <img src = "loadingimage.gif">
    </div>
    <div id = "content" style="display:none">
    The rest of your page here
    </div>
    
    <script type = "text/javascript">
    function hideshow() {
    document.getElementById("loading").style.display="none";
    document.getElementById("content").style.display="block";
    }
    </script>
    Paralympic swimming is going through the roof, quite literally. - Commentator Channel 4

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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