Navigation:    Home arrow Wait While Loading Image
Javascript Wait While Loading Page Display Image PDF  
Digg Reddit Ma.gnolia Stumble Upon Facebook Twitter Google Yahoo! MyWeb Furl" BlinkList Technorati Mixx Bookmark

If you have a page that takes long time to display it is a good idea to display a "wait until the page loads" image. This tutorial show you how to implement this in your webpage.

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>

Click here to see a demo

If you found this tutorial useful you might be interested to read the following:

Javascript Text Box Characters Counter

Javascript Create and Resize Popup Windows

Javascript Disable Right Click

 
 
[ Back ]