Below is a simple preloader code I have... What I want to do is once
the images have completed preloading, the "Loading Images..." text
must disappear. I am not able to do it.
<html>
<head>
<title>Preloader</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p>
<div align="center">
<script type="text/javascript">
var imagenames=new Array('http://tbn0.google.com/images?
q=tbn:_Mg6ZYPbkBTWYM:
http://www.sat.dundee.ac.uk/jpg/20020131-1205-
large.jpg' , 'http://tbn0.google.com/images?
q=tbn:UhAhRmP9ngqNoM:
http://www.ari.uni-heidelberg.de/gaia/gallery/GR/
gr0283-01.artistic-Gaia-Galaxy-large.jpg');
var imagesdone=false;
var loaded=0, preloader, images=new Array();
var txt ='<p id="preloader" style="position:relative; background-
color:#aa00dd; color:#fff; font-size:12px; line-height:25px; vertical-
align:middle; width:300px; text-align:center; font-
family:Arial;">Loading Images...</p>';
document.write(txt);
function loadimages(){
preloader=document.getElementById('preloader');
for(n=0; n < imagenames.length; n++){
images[n]=new Image();
images[n].src=imagenames[n];
setTimeout("checkload('+n+')" ,n*100);
}
}
function dispbars(){
loaded++;
if(loaded >= imagenames.length) setTimeout('hidepreloader()',
800);
}
function checkload(index){
(images[index].complete)? dispbars() :
setTimeout('checkload('+index+')', 100);
}
function hidepreloader(){
preloader.style.visibility="hidden";
imagesdone=true;
}
loadimages();
</script>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p>
</body>
</html>
Similar Threads
