7.1.2　预载入图像

使用上面介绍的技术来交换一个新的图像存在一个问题：当把新文件的路径交换到src属性中时，浏览器必须下载该图像。如果等到某人把鼠标光标移动到图像上之后才下载新图像，在新图像出现之前，可能会有一段不愉快的延迟。在导航栏的情况下，翻滚效果会令人感到迟缓而响应很慢。

为了避免这一延迟，预先载入任何想要立即出现以作为对操作的响应的图像。例如，当访问者的鼠标光标移动到导航栏上的一个按钮，翻滚图像应该立即出现。预载入一个图像只是意味着强迫浏览器在我们计划显示该图像之前下载它。当图像下载完，它存储在Web浏览器的缓存中，这样后续对该文件的任何请求都由访问者的硬盘驱动器提供，而不需要等待从Web服务器下载的数秒时间。

预载入图像和创建一个新的image对象并设置该对象的src属性一样容易。实际上，我们已经知道如何做到这点：

var newPhoto=new Image（）；

newPhoto.src='images/newImage.jpg'；

所谓预载入，就是在需要替换Web页面上的一个当前图像之前进行。预载入的一种方法是在脚本的开始处创建一个数组，其中包含了要预载入的所有图像的路径，然后遍历这个列表，为每个项目创建一个新的image图像：

1 var preloadImages=['images/roll.png'，

2'images/flower.png'，

3'images/cat.jpg']；

4 var imgs=[]；

5 for（var i=0；i＜preloadImages.length；i++）{6

imgs[i]=new Image（）；7

imgs[i].src=preloadImages[i]；8}

第1行到第3行是一条JavaScript语句，它创建了一个名为preloadImages的数组，包含了3个值，分别是每个要预载入的图形文件的路径（正如2.8.1节所介绍的，如果把每个数组项单独一行放置，往往更容易阅读）。第4行创建了一个新的空数组：imgs，它将存储每个预载入的图像。第5行到第8行给出了一个基本的JavaScript for循环（参见3.3.3节），它对于数组preloadImages中的每个项目都运行一次。第6行创建了一个新的image对象，而第7行获取了来自preloadImages数组的文件路径，这就是导致图像下载的魔术所在。