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

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

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

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

A

var image=newimage（）；
对于（i=0；i

B

var图像；
对于（i=0；i

C

var-images=[]；
对于（i=0；i

谢谢

编辑：

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

请查看：

---

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

如果我没有记错的话，我对

解决方案有问题，而不是在浏览器中实际预加载。但我不是100%肯定

既然你已经把它们都编码好了，为什么不测试它们呢，你甚至可以分析它们，看看哪一个最快。
我一直在使用下面的代码，我也看到很多其他网站都在使用这些代码，所以我会假设这种方法是最有效的，类似于你的方法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];
             }
    }
}

函数MM_preload images（）{//v3.0
var d=文件；
如果（d.images）{
如果（！d.MM_p）d.MM_p=新数组（）；
变量i，j=d.MM\u p.length，a=MM\u.arguments；
对于（i=0；i
而言，以下代码似乎适合我。它基于[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})

或

我有两个（可能是哑巴）要添加到OP中的问题：方法A不意味着每次下载都必须在下一次下载开始之前完成吗？C是否提供了一个优势，不等待每次下载完成？没有任何方法等待下载完成——它们都只是设置Image对象的属性。不同之处在于，A使用一个映像imes，B创建单独的图像而不保存对所有图像的引用，C在每次预加载时都会创建一个图像并保存引用。是否严格要求您从一系列文件名开始？如果您的目标只是简单地增强用户体验，那么使用CSS精灵可能会更好：我相信Dreamweaver会生成这个代码，它解释了
MM
前缀（对于Macromedia）。
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];
             }
    }
}

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

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