Question

如果我有一个图像文件名数组，

var preload = ["a.gif", "b.gif", "c.gif"];

我想在循环中预加载它们，是否每次都需要创建一个图像对象？下面列出的所有方法都有效吗？一个更好吗？

一个。

var image = new Image();
for (i = 0; i < preload.length; i++) {
    image.src = preload[i];
}

乙

var image;
for (i = 0; i < preload.length; i++) {
    image = new Image();
    image.src = preload[i];
}

下进行。

var images = [];
for (i = 0; i < preload.length; i++) {
    images[i] = new Image();
    images[i].src = preload[i];
}

谢谢！

Answer 1

修改：

实际上，我只是进行了测试，方法A没有按预期工作：

检查出来：http://www.rootspot.com/stackoverflow/preload.php

如果在页面加载完成后单击第二个图像，它应该是即时显示的，因为它是预加载的，但第一个没有，因为在更改源之前没有时间加载。有趣。通过这个新的开发，我将继续使用方法C。

Answer 2

以下代码似乎对我有用。它基于[A]

JQuery的：

var gallery= ['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];

var preload_image_object=new Image();

//解决方案：

$.each(gallery,function(i,c){preload_image_object.src=c.logo})

OR

$.each(['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'],function(i,c){preload_image_object.src=c})

Answer 3

我总是使用下面的代码，我也看到过其他许多网站都使用过的代码，所以我会假设这个方法效果最好，类似于你的方法c

function MM_preloadImages() { //v3.0
    var d=document; 
    if(d.images){ 
        if(!d.MM_p) d.MM_p=new Array();
         var i,j=d.MM_p.length,a=MM_preloadImages.arguments; 
         for(i=0; i<a.length; i++)
             if (a[i].indexOf("#")!=0) { 
                 d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];
             }
    }
}

我建议使用firebug

之类的内容对它们进行分析

Answer 4

如果我没记错的话，我在A解决方案中遇到的问题实际上并未在浏览器中预先加载。我不是百分百肯定的。

由于您已将它们全部编码，为什么不测试它们，您甚至可以对它们进行分析以查看哪个最快。

在JavaScript中预加载多个图像的最佳方法是什么？

4 个答案: