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

DanCorb · 09-22-2012, 07:12 PM

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.

Philip M · 09-22-2012, 07:59 PM

Quote:

Originally Posted by DanCorb

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