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

问题描述：

如果我有图像文件名的数组，在JavaScript中预加载多个图像的最佳方式是什么？

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

谢谢！

难道你开始了与数组的严格要求文件名？如果你的目标是简单地提高用户体验，那么使用CSS精灵可能会更好：http://www.alistapart.com/articles/sprites/ – 2009-04-17 17:11:15

答

编辑：

其实，我只是把它放到测试，并如预期A法不起作用：

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

如果单击2号当页面完成加载时，图像应该是瞬间显示的，因为它是预加载的，但第一个并不是因为没有时间在源文件被更改之前加载。有趣。随着这一新的发展，我只是继续前进，并使用方法C.

我有两个（可能是哑巴）问题添加到OP的：方法A是否意味着每个下载都必须在下一个开始之前完成？ C是否通过不等待每个下载完成而提供优势？ – 2009-04-17 17:05:16

没有任何方法会等待下载完成 - 它们都只是设置Image对象的属性。不同之处在于A多次使用单个图像，B会创建单独的图像而不保存对所有图像的引用，并且C都会为每个预加载创建一个图像并保存该引用。 – ojrac 2009-04-17 17:11:55

感谢您的澄清。 – 2009-04-17 19:48:32

答

如果我没记错的话，我有A解决方案没有实际预加载在浏览器中的问题。但我不是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]; 
      } 
    } 
}

我会推荐用类似firebug

答

来描述它们，下面的代码似乎适用于我。它基于[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})

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

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

相关推荐