ItHowTo.ro » javascript website preloader http://www.ithowto.ro Blogging about IT Stuff by ESSERIO Wed, 30 Nov 2011 09:13:07 +0000 en hourly 1 Javascript Website Preloader http://www.ithowto.ro/2008/12/javascript-website-preloader/ http://www.ithowto.ro/2008/12/javascript-website-preloader/#comments Thu, 18 Dec 2008 08:43:36 +0000 gkoo http://www.ithowto.ro/?p=16 Here’s a nice java based website preloader I found recently. I needed it for a project and I think this might be useful to others too. Credits for this go to USINGIT.COM.

So here’s how you should use it :

Copy the following lines in to the header of the webpage:

<SCRIPT LANGUAGE=”JavaScript”>

<!– Begin
function clearPreloadPage() { //DOM
if (document.getElementById){
document.getElementById(‘prepage’).style.visibility=’hidden’;
}else{
if (document.layers){ //NS4
document.prepage.visibility = ‘hidden’;
}
else { //IE4
document.all.prepage.style.visibility = ‘hidden’;
}
}
}
// End –>
</SCRIPT>

Now add this to you body tag:

<BODY onLoad=”clearPreloadPage();”>

Then, in the body of the actual website, add the following that will display a loading message until the content of yout page is fully loaded.

<div id=”prepage” style=”position:absolute; font-family:arial; font-size:16; left:0px;top:0px; background-image:url(images/mainBg.gif); background-repeat:repeat; height:100%; width:100%;”>
<div style=”padding-top:350px; text-align:center;”><img src=”images/loading.gif” height=”20″ width=”20″ /><span style=”font-size:19px; color:#000000; height:”> Se Incarca…</span></div>

You can customise the first div and add your own background or whatever you want but keep its id = “prepage” and the position:absolute; left:0px;top:0px; elements in its style. Then, in the second div, place whatever text or animated gif you’d like to be displayed until the page is loaded.

]]> http://www.ithowto.ro/2008/12/javascript-website-preloader/feed/ 0