Sunday, July 18, 2010

Loading Image Before the Page Loads using Javascript

Below is the code used to show the Loading image before the page loads.


To implement this you will need to:

1. Every time your page loads a "init()" function will load.

<body onLoad="init()">

2. Define a div named "loading" right after <body> section.

<div id="loading" style="position:absolute; width:100%; text-align:center; top:300px;">
<img src="loading.gif" border=0></div>
 
The loading.gif image should be an animated gif that suggests that the page is still loading.

3. Place this javascript code right after you define the div.
 <script>
 var ld=(document.all);
  var ns4=document.layers;
 var ns6=document.getElementById&&!document.all;
 var ie4=document.all;
  if (ns4)
  ld=document.loading;
 else if (ns6)
  ld=document.getElementById("loading").style;
 else if (ie4)
  ld=document.all.loading.style;
  function init()
 {
 if(ns4){ld.visibility="hidden";}
 else if (ns6||ie4) ld.display="none";
 }
 </script>
 
& to See the Demo, Click Here 

No comments: