Image Loder

Introduction

An advanced version of preloader (lesson I). The effect now has a status bar and doesn't rely on the window.onerror object/property to allow javascript to run before the body of the page has loaded. This is done by putting the whole script just before the </body> tag. Once again this script will not work on NS2 - 4 but is good to go on NS6+ and IE, although I must admit I haven't tested it on early versions of MSIE. This script has been tested on IE6 and NS7.

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

And that's it! Any queries contact aashal@hotmail.com

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here