Question

我如何引用此javascript预装的图片？此代码来自

中的问题

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

在您的代码中，您依赖于浏览器缓存作为“预加载器”。 images[i]变量中只保留了最后一个imageObj来源。只需设置图像的src值即可将其从浏览器缓存中拉出来。

正确的预加载方法是创建imageObj图像对象的数组。您仍然通过`.src'引用，但现在您在Javascript内存中有图像对象而不是浏览器缓存。

Answer 2

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

如何引用此预加载的图像

2 个答案: