Question

How would I reference an image preloaded from this javascript? This code comes from the question at

stackoverflow: preload hidden CSS images

<script language="JavaScript">
function preloader() 
{
 // create object
 imageObj = new Image();

 // set image list
 images = new Array();
 images[0]="image1.jpg"

 imageObj.src=images[0];
} 
</script>

Answer 1

It’s a logical error in your code as pointed out by Matt H.

Instead creating a separate Image object for each individual images. You are just creating one object and keep changing the src of that object.

function preloader() {
    // counter
    var i = 0;

    // set image list
    images = new Array();
    images[0] = "image1.jpg"
    images[1] = "image2.jpg"
    images[2] = "image3.jpg"
    images[3] = "image4.jpg"

    //create an array to hold all the Image objects
    imageObjs = [];

    // start preloading
    for (i = 0; i <= 3; i++) {
        var imageObj = new Image(); //create new Image object for each image
        imageObj.src = images[i]; //set the src of new Image object to current image
        imageObjs.push(imageObj); //add the current Image object to the array
    }
}