JavaScript Forum

**rushiags** · 12-31-2008, 04:10 AM

Hello i am very new to this forum ,

I want to implement page loader functionality means while loading page first it load loader image and in background it can load total page and when page load properly the loader image is to invisible. and i am using the following code

<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>

<body onLoad="init()" >
<div align="center" id="loading" style="position:absolute; height:100%; width:100%; text-align:center; top:0px; background-color:gray; opacity:0.6; filter:alpha(opacity=50); " >

<div style="top:300px; padding-top:300px; ">
<img src="<?=WEB_ROOT;?>/images/loading1.gif" align="center" border="0" style="background-color:#FFFFFF; ">
<br/>
<br/>
<p style="font-size:20px ">
<strong style="color:#FFFFFF ">Please Wait......Loading Results</strong>
</p>
</div>
</div>

</body>

This code is properly work in Firefox but not work in Internet Explorer.
Why???
If any changes that i have to make in code please send me....
Please any one can help me???????

**jason_bristol** · 01-04-2009, 04:47 PM

I'm not sure why you're doing an if statement for browsers like ie4. I really don't think anyone uses that anyone, and I mean no-one.

There are easier ways to add a gif loader.

1. You can add an animated gif to one of your divs backgrounds using just css.

Code:

div#imageLoader {
      background: url(images/loaderImage.gif) no-repeat centre centre;
}

or 2. Do a simple javascript like

Code:

window.onload = loadFunction;

function loadFunction() {
        document.getElementById("imageLoader").style.display = "none";
}

**Insensus** · 01-04-2009, 06:28 PM

if (ns4)
ld=document.loading;

...should be...

if (ns4)
ld=document.loading.style;

... I think.
I'm not really into these things though, but I'd say that's what's missing logically.