Javascript loader for Webpages

dreambill · - Joined: 04 Jun 2008 Posts: 5

script for people who are hosting their website on a low bandwidth server, The loader is designed to let your visitors know that the webpage they are about to see is getting loaded.

installation time: 3min
Difficulty level: easy

step #1

open your index.html*
Insert the following javascript inside the <head></head> tag:

<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

replace the <body> tag with:

<body onload="is_loaded();">

Step #3

insert this html code just under the: <body onload="is_loaded();"> tag

<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:#0099ff">!</font>
</td>
<td style="text-align:center; background-color:#0099ff">
<font style="font-size:28px; color:#ffffff; text-align:center;">Loading ... please wait</font>
</td>
</tr>
</table>
</center>
</div>

costumize it to your need by changing the color, size, even language by changing: "Loading ... please wait" for the language you want.

enjoy :-)

badai · - Joined: 24 Apr 2003 Posts: 82

if your file content external javascript, you can also set the loader div innerHTML to something. put the function to change innerHTML just before every <script src= ...