Javascript loader for Webpages

 
Post new topic   Reply to topic    Aprelium Forum Index -> Tutorials
View previous topic :: View next topic  
Author Message
dreambill
-


Joined: 04 Jun 2008
Posts: 5

PostPosted: Wed Jun 25, 2008 10:46 pm    Post subject: Javascript loader for Webpages Reply with quote

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 :-)
Back to top View user's profile Send private message
badai
-


Joined: 24 Apr 2003
Posts: 82

PostPosted: Sat Nov 01, 2008 1:15 am    Post subject: Reply with quote

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= ...
Back to top View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    Aprelium Forum Index -> Tutorials All times are GMT + 1 Hour
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB phpBB Group