This is a very complicated script that I would not have written had I not stumbled upon a post at PartyInfo.com. In a certain forum there, numerous people were wondering where to get a script that would pre-load their page's images. One person suggested my page, and I noticed an incline in page hits. Always one to give the page viewer what they want, I got to work on this script. It does just as promised and is easily customizable to your page. I would suggest VERY strongly that you check out the color coding.

Also, you must download at least two images from below and put them on your site. These will serve as the colored bar indicating the progress (the default for this script is "plred" and "plyellow", but you can use any combo you want). Just hold Shift and click the link to Save them
plred.gif
plyellow.gif

plgreen.gif
plwhite.gif
plgrey.gif
plblack.gif
plblue.gif
The source..



<script language="Javascript1.1">
<!--
// please keep these lines on when you copy the source
// made by: Nicolas - http://www.javascript-page.com

var      nexturl = "preloading2.html"
var img1location = "plred.gif"
var img2location = "plyellow.gif"

function initArray() {

this.length = initArray.arguments.length;
  for (var i = 0; i < this.length; i++) {
  this[i] = initArray.arguments[i];
  }
}

var pics = new initArray(
"email.gif",
"jsnow.gif",
"cabw1.gif",
"preloading.gif"
);

var loaded = new initArray(pics.length);
var num_loaded = 0;

for (h = 0; h < pics.length; h++) {
loaded[h] = 0;
}

function loadg() {
  for (g = 0; g < pics.length; g++) {
   eval('document.preload'+g+'.src = "'+pics[g]+'";');
   loaded[g]++
  }
}

function update(z) {

loaded[z]++;

 if (loaded[z] == 2) {
  eval('document.status'+num_loaded+'.src = img1location;');
  num_loaded++;

  if (num_loaded == pics.length) {
  location.href = nexturl;
  }
 }
}

//-->
</script>
<center>
<b><i>Preloading Images...</i></b><BR>
Please be patient while some images are<BR>
being preloaded. <a href="preloading2.html">Go here</a> if nothing happens.<br><br>
<script language="Javascript1.1">
<!--
// please keep these lines on when you copy the source
// made by: Nicolas - http://www.javascript-page.com

document.write("<IMG src="+img1location+" width=10 height=10>")

var offset = 280 / pics.length

for (q = 0; q < pics.length; q++) {
  document.write("<IMG src="+img2location+" width="+offset+" height=10 name=\"status"+q+"\">")
}

//-->
</script>
</CENTER><BR><BR><BR><BR><BR><BR><BR><BR>
<script language="Javascript1.1">
<!--
// please keep these lines on when you copy the source
// made by: Nicolas - http://www.javascript-page.com

for (w = 0; w < pics.length; w++) {
  document.write("<IMG src="+img2location+" width=1 height=1 onLoad=\"update("+w+")\" name=\"preload"+w+"\">")
}

loadg();
//-->
</script>
Color coding..


Change the text of this color to the URL ths you want the page to go to after all images are loaded. Note: This is used twice.
Change the text of this color to the URL of the two images that you put on your site. You only need to change this if you did not use or did not name the images "plred" and "plyellow".
Text of this color indicates the URL of the images you want to preload. Each image is stated

"image_url.gif",

Just add and delete code in that manner to add or take away pre-loaded images. You aren't required to use GIF files, you can use any file type you want. Just change the extension.