Image Preloader MKII

The thumbnail display is only a visual reference for this example to show the images being preloaded.

The most common way for preloading images is to simply create an Image object and assign a Source, but if an image is used before it has preloaded, this preloading will have no effect at all.
To make preloading work properly the images have to complete loading before they are accessed, typical examples of this would be rollovers, slideshow scripts, or where images are shown at random.

The Image Preloader MKII ensures that all images are downloaded before they can be displayed.
A couple of optional features are the ability to see how many images remain to be downloaded and the inclusion of a progress bar to let your visitor know that something is happening.

The preloader works by creating a new image object that is assigned an onload event so that when the current image has preloaded a function is run to check for the next image in the array.
Once the images are preloaded your function is run.

You also have the option to run your function at any stage of the preloading by setting variable runNum to any number within your array length, once this number is reached your function is run while the rest of the images preload in the background.

If you are preloading images for rollovers your visitor may still mouseover a link before the images have preloaded, to prevent this you have to temporarily disable them.

function my_mouseEvent(){

if(loaded==0){
return
}

document.image.src="pic.jpg"
}

<script type="text/javascript">
<!--
// Realised by Jeff
// www.huntingground.freeserve.co.uk

images=new Array("pic01.jpg","pic02.jpg","pic03.jpg","pic04.jpg","pic05.jpg")

imgTotal=images.length
runNum=images.length // when to run your function

loaded=0
aIndex=0
isError=0
perc=100/images.length // percent display
percent=0 // percent display
var preloaded=new Array()

function preloadImage(){
preloaded[aIndex]=new Image()
preloaded[aIndex].onerror=noImage
preloaded[aIndex].src=images[aIndex]
if(isError==0){chkLoading()}
}

function chkLoading(){
if(preloaded[aIndex].complete==true){nextImage()}
else{setTimeout("chkLoading()",100)}
}

function nextImage(){
imgTotal-- // counter display
document.getElementById("info").innerHTML="Loading "+imgTotal // counter display
progress() // progress bar function

aIndex++

if(aIndex!=images.length){
setTimeout("preloadImage()",100)
}

if(aIndex==runNum){

document.getElementById("bar_cont").style.visibility="hidden"

loaded=1
doThis() // FUNCTION TO RUN
}

}

function noImage(){
if(aIndex==images.length-1){return}
isError=1
imgTotal-- // counter display
progress() // progress bar display

if(aIndex==images.length-1){
return
}
aIndex++
setTimeout("isError=0;preloadImage()",100)
}

step=0
function progress(){
Width=document.getElementById("bg_layer").offsetWidth// width of bar
step_size=Width / images.length // calculates step size
step+=(step_size*1)
document.getElementById("progress_bar").style.width=step
}

// add onload="preloadImage()" to the opening body tag

//-->
</script>

<div id="bar_cont" style="position:relative">
<div id="info" style="position:absolute;left:0px;top:0px"> </div>
<div id="bg_layer" style="position:absolute;left:0px;top:0px;width:300px;background-color:#8e8462;font-size:10px"> </div>
<div id="progress_bar" style="position:absolute;left:0px;top:0px;width:0px;background-color:#c9bda9;z-index:2;font-size:10px"> </div>
</div>

If you want to preload in the background without the counter or progress bar use the following script

<script type="text/javascript">
<!--
// Realised by Jeff
// www.huntingground.freeserve.co.uk

images=new Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg","pic5.jpg")

imgTotal=images.length
runNum=imgTotal // when to run your function

loaded=0
aIndex=0
isError=0

var preloaded=new Array()

function preloadImage(){
preloaded[aIndex]=new Image()
preloaded[aIndex].onerror=noImage
preloaded[aIndex].src=images[aIndex]
if(isError==0){chkLoading()}
}

function chkLoading(){
if(preloaded[aIndex].complete==true){nextImage()}
else{setTimeout("chkLoading()",100)}
}

function nextImage(){
aIndex++
if(aIndex!=images.length){
setTimeout("preloadImage()",100)
}
if(aIndex==runNum){
loaded=1
doThis() // FUNCTION TO RUN
}
}

function noImage(){
isError=1
aIndex++
setTimeout("isError=0;preloadImage()",100)
}

function doThis(){
alert("This would be your function to run")
}

// add onload="preloadImage()" to the opening body tag

//-->
</script>

Load in pre-defined sequence

With a bit of preparation the following script ensures that your images are loaded in the sequence that you want.
You can reference the image tags by the flow of the document or by name.

When you code the img tags that are going to be loaded in sequence you must use a blank transparent gif as the src. You can create this transparent gif in most image editors and you only have to make the size of this gif 1pixel by 1pixel. You only need to create the 1 transparent gif as this can be used in all the required tags

The image tag sizes should be set to the size of the image that is going to be loaded into it, this is so that the layout of your page is not affected by not having the proper images there.

Name the image tags in the order that you want them loaded.
Arrange the images array in the order that the images are to be loaded and set the variable sequenced to the number of images to be loaded in sequence.

The script can continue to preload images after the sequenced loading is complete.
For this example variable sequenced is set to 5 so the first five images in the array must be in the order that they are to be loaded, the rest of the images will continue to preload in the background.

<script type="text/javascript">

<!--
// Realised by Jeff
// www.huntingground.freeserve.co.uk

images=new Array()
images[images.length]="image1.gif" // loaded in sequence first
images[images.length]="image2.gif"
images[images.length]="image3.gif"
images[images.length]="image4.gif"
images[images.length]="image5.gif" // loaded in sequence last

images[images.length]="image6.gif"
images[images.length]="image7.gif"
images[images.length]="image8.gif"

sequenced=5

imgTotal=images.length
runNum=imgTotal // when to run your function

loaded=0
aIndex=0
isError=0

var preloaded=new Array()

function preloadImage(){
preloaded[aIndex]=new Image()
preloaded[aIndex].onerror=noImage
preloaded[aIndex].src=images[aIndex]
if(isError==0){chkLoading()}


function chkLoading(){
if(preloaded[aIndex].complete==true){nextImage()}
else{setTimeout("chkLoading()",100)}
}

function nextImage(){

if(aIndex<sequenced){
document["pic"+aIndex].src=preloaded[aIndex].src // by name
//document.getElementsByTagName("IMG")[aIndex].src=preloaded[aIndex].src // by document flow
}

aIndex++
if(aIndex!=images.length){
setTimeout("preloadImage()",500)
}
if(aIndex==runNum){
loaded=1
}
}

function noImage(){
isError=1
aIndex++
setTimeout("isError=0;preloadImage()",100)
}

// add onload="preloadImage()" to the opening body tag

//-->
</script>