Here is image preloader :) you can use this this script to not only preload images before displaying them, but also, get a live update on it’s progress through an update bar. Once the preloadiing is complete, the surfer is then directed to the page containing the preloaded images.

here is sample of code :

P.S.  sorry I forgot. You need made 2 gif images one 1X1 pix black dot and other 1X1 pix blue dot . Call them blue.gif and black.gif and paste them in the same scriptfolder.

<html>
<head>
<title>Preload Image Page</title>
<script language=”JavaScript1.1″>
<!– begin hiding

// You may modify the following:
var locationAfterPreload = “monuments.html” // URL of the page after preload finishes
var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
// Put the URLs of images that you want to preload below (as many as you want)
var yourImages = new Array(“image.jpg”,”image1.jpg”,”image2.jpg”,”image3.jpg”,”image4.jpg”)

// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = “black.gif” // default preloadbar color (note: You can substitute it with your image, but it has to be 1×1 size)
dots[1] = new Image(1,1)
dots[1].src = “blue.gif” // color of bar as preloading progresses (same note as above)
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages[i] = new Image()
preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded[i] == false && preImages[i].complete) {
loaded[i] = true
eval(“document.img” + currCount + “.src=dots[1].src”)
currCount++
}
}
timerID = setTimeout(“checkLoad()”,10)
}
// end hiding –>
</script>

</head>

<body bgcolor=”#FFFFFF”>

<center>
<font size=”4″>Please be patient while some images<br>
are being preloaded…</font><p>
0%
<script language=”JavaScript1.1″>
<!– begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn’t support JavaScript image object.
if (document.images) {
var preloadBar = ”
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += ‘<img src=”‘ + dots[0].src + ‘” width=”‘ + coverage + ‘” height=”‘ + heightOfPreloadBar + ‘” name=”img’ + i + ‘” align=”absmiddle”>’
}
preloadBar += ‘<img src=”‘ + dots[0].src + ‘” width=”‘ + (leftOverWidth+coverage) + ‘” height=”‘ + heightOfPreloadBar + ‘” name=”img’ + (yourImages.length-1) + ‘” align=”absmiddle”>’
document.write(preloadBar)
loadImages()
}

// end hiding –>
</script>
</center>
</body>
</html>