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

If I have an array of image filenames,

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

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

and I want to preload them in a loop, is it necessary to create an image object each time? Will all the methods listed below work? Is one better?

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

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

Thanks!

4 个解决方案

#1

EDIT:

Actually, I just put it to the test, and Method A does not work as intended:

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

Check it out: http://www.rootspot.com/*/preload.php

请查看:http://www.rootspot.com/*/preload.php

If you click on the 2nd image when the page is finished loading, it should appear instantaneously because it was preloaded, but the first one doesn't because it didn't have time to load before the source was changed. Interesting. With this new development, I'd just go ahead and use Method C.

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

#2

The following code seems to work for me. Its based on [A]

以下代码似乎对我有用。它基于[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();

//Solution:

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

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

#3

I've always used the following code, which I've also seen used by many other sites, so I would make the assumption that this method is most performant and is akin to your method c

我总是使用下面的代码,我也看到过许多其他网站使用过的代码,所以我会假设这个方法性能最好,类似于你的方法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];
             }
    }
}

I would recommend profiling them all with something like firebug

我建议用firebug之类的东西来描述它们

#4

If I remember correctly I had issues with the A solution not actually pre-loading in a browser. I'm not 100% sure though.

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

Since you have them all coded out, why not test them, you could even profile them to see which is fastest.

既然你已经将它们全部编码了,为什么不测试它们,你甚至可以对它们进行分析以查看哪个是最快的。

#1