Poprobuite etot script
ne proboval no govoriat rabotaet
<script language="JavaScript" type="text/JavaScript">
<!--
preloader(); //start our function that displays text message
var image0 = new Image();
image0.src = "images/loader.gif" //preload our required image
var image1 = new Image(); //now preload your images in this format
image1.onload = statusBar; // call function when image has loaded to move status bar along
image1.src = "images/your_image.jpg"; //set the source
var image2 = new Image(); //preload your second image same format as above
image2.onload = statusBar;
image2.src = "images/your_image1.jpg";
var image2 = new Image(); //when you get to your last image...
image2.onload = statusBar;
image2.onload = endLoader; //call this function as well -( hides status bar)
image2.src = "images/your_image2.jpg";
var begin = true;
function endLoader(){
begin = false;
if(document.getElementById){ //for new explorer & ns6+
document.getElementById("hider1").style.display='none'; //simply hides status and loader bar
document.getElementById("holder1").innerHTML = "<img src='"+your_images[0]+"' border=\"0\">";
//do whatever you want above here
}else if(document.all&&!document.getElementById){ //for old explorer
document.all.hider1.style.display='none';
document.all.holder1.innerHTML = "<img src='"+your_images[0]+"' border=\"0\">";//do whatever you want here
}
clearTimeout(homer);
return begin;
}
var your_images = new Array("images/loader.gif","images/yourImage.jpg","images/yourImage1.jpg");
//put all your images into an array as well so we can use the var your_images.length later
var the_number = your_images.length-1; //set up a variable for use later
var messages = new Array("Your images are loading","Your images are loading.","Your images are loading..","Your images are loading...","Your images are loading..","Your images are loading.");
//your message array - get above onto one line
var counter = 0;
function preloader(){
if(begin==true)
if(document.getElementById){ //for new explorer & ns6+
document.getElementById("holder").innerHTML = "<font color=\"#ffffff\">"+messages[counter]+"</font>";
}else if(document.all&&!document.getElementById){ //old explorer
document.all.holder.innerHTML = "<font color=\"#ffffff\">"+messages[counter]+"</font>";
} //writes your message array to screen - get above onto one line also
counter++;
if(counter==6){
counter = 0;
}homer = setTimeout("preloader()",200);
}
var totalWidth = 300; //set this to the width in pixels you want your loader bar to go to
var itemWidth = totalWidth/your_images.length;
var itemWidth1 = itemWidth;
var myVar = 0;
function statusBar(){
if(document.getElementById){ //new explorer & ns6+
document.getElementById("loader").style.width =+ itemWidth+"px";
document.getElementById("count").innerHTML = ""+myVar+" of "+your_images.length+"";
} else if(document.all&&!document.getElementById){ //old explorer
document.all.loader.style.width =+ itemWidth+"px";
document.all.count.innerHTML = ""+myVar+" of "+your_images.length+"";
}
itemWidth+=itemWidth1;
myVar++;
}
//-->
</script>
And in the body you'll need a div for the message and loader bar:
<div id="hider1" style="position:absolute; left:126px; top:379px; width:301px; height:16px; z-index:200">
<table width="300">
<tr>
<td width="229" height="10" ><span id="holder" class="info"></span></td>
<td width="59"><span id="count" class="info1"></span></td>
</tr>
<tr>
<td height="10" colspan="2" class="table"><img src="../images/loader.gif" name="loader" width="5" height="10" id="loader"></td>
</tr>
</table>
</div>
And an element to put your pictures:
<span id="holder1" class="info"></span>
And a loader image - you can use this one if you so whish: