javascript - 如何引用这个预加载的图像

Question

我如何引用从这个 javascript 预加载的图像？此代码来自

处的问题

计算器: 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

正如 Matt H 所指出的，这是您代码中的逻辑错误。

而是为每个单独的图像创建一个单独的 Image 对象。您只是在创建一个对象并不断更改该对象的 src。

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