Javascript Preloader for Webpages

Javascript Preloader for Webpages

Did you notice the preloader that says .. "Page loading..." with the animated GIF preloading image 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 frustrating 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:350px; height:120px; text-align:center">
  <center>
    <div style="text-align:center; background-color:#fff; font-size:12px; font-family: Tahoma; font-weight: bold; color:#333; border: 4px solid #990000; padding: 4px;">Page loading...<br /><img src="/images/loading.gif" /></div>
   </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}

Have a question? Feel free to send me your query and I will try to answer you back!

7 Ever Green hacks, tips, tricks, reviews

Recently Published Tips

Cool Stuffs

Keep Discovering WebTips » 2 | 3 | 4 | 5