! Loading ... please wait
 
WebTips - Discover, Share, Ask

Free Online Tips Blog

 		 
Add to: Add Ramnath on Facebook  Add Ramnath on Orkut      Home |  Login  |  Contribute |  Mastermind |  Members |  Contact us |  IQuest         

Javascript Preloader for Webpages

Did you notice the preloader that says .. "Loading .. please wait" while this page was getting loaded? Missed it? Ok, please refresh this page once more. This preloader is designed to let your visitors know that the webpage they are about to see is getting loaded. The preloader will automatically terminate once the loading of the webpage is complete. This gives a bit of relief to the visitors from the frustating delays and let them know that the whole loading process is going on. Here is the trick to do that. (I have tried to keep the HTML code as simple as possible and hence I have used a table inside the main div. Please replace it with div too if you wish.)





Case #1: If you want to use the preloader for the whole website



Step #1

Insert the following javascript inside the <head></head> tag:
/* Web development and mastering tips at http://webtips.blogsome.com (Please keep this) */
<script type="text/javascript" language="javascript">
function is_loaded() { //DOM
if (document.getElementById){
document.getElementById('preloader').style.visibility='hidden';
}else{
if (document.layers){ //NS4
document.preloader.visibility = 'hidden';
}
else { //IE4
document.all.preloader.style.visibility = 'hidden';
}
}
}
//-->
</script>


Step #2

Now replace the <body> tag with: <body onload="is_loaded();">

Step #3

Next insert this html code just under the tag inside the main index page:
<div id="preloader" style="position:absolute; left:30%; top:290px; width:380px; height:120px;">
<center>
<table border="0" align="center" cellpadding="6" cellspacing="0" style="font-family:Arial, Verdana; border: 2px solid #006633;">
<tr>
<td style="text-align:center; background-color:#ffffff">
<font style="font-size:120px; font-weight:bold; color:#cc6600">!</font>
</td>
<td style="text-align:center; background-color:#006633">
<font style="font-size:28px; color:#ffffff; text-align:center;">Loading ... please wait</font>
</td>
</tr>
</table>
</center>
</div>


Thats it! From now on your visitors will get a preloader while a webpage gets loaded. Also note that inside this preloader I havent included any animated gifs, flash movies, etc. to make the process fast enough.

Case #2: If you want to use the preloader for a particular webpage



Instead of inserting the html code (as in Step #3 ) in the main index page, insert it inside the webpage.

OR .. say you wish to use this preloader for pages /page-1/ and /page-2/

Insert this small smarty code just after </head> tag and skip Step #2:
{if $smarty.server.REQUEST_URI == '/page-1/' || $smarty.server.REQUEST_URI == '/page-1' || $smarty.server.REQUEST_URI == '/page-2/' || $smarty.server.REQUEST_URI == '/page-2'}

<body onload="is_loaded();">

{else}

<body>

{/if}


See user feedbacks | Ask a free question

^Back to top^

We follow creative commons 2.5 Prior permission should be taken from the admin before reproducing any part of this site.

Template by Ramnath || Free blogs at Blogsome

powered by WordPress 1.5.1-alpha