Javascript 加载并访问加载的所有图像

我有一个页面，其中的菜单按钮（即图像）是白色的，但我希望它们在悬停时变为红色，在mouseout时变为白色。所以我有相应的红色菜单按钮。因此，如果白色按钮是motors1.jpg，红色按钮是motors2.jpg，那么下面的JQuery代码就是算法

<table>
<tr>
<td><img class="navimg" src="images/home1.gif"/></td>
<td><img class="navimg" src="images/motors1.gif"/></td>
<td><img class="navimg" src="images/about_us1.gif"/></td>
<td><img class="navimg" src="images/media1.gif"/></td>
<td><img class="navimg" src="images/forums1.gif"/></td>
<td><img class="navimg" src="images/dealers1.gif"/></td>
<td><img class="navimg" src="images/whats_new1.gif"/></td>

</tr>
</table>

我使用了一个外部CSS样式表进行定位

                          .navimg{
                         width: 125.5px;
                         height: 34px;
                                  }

---

所以问题是：我注意到当第一次加载页面时，白色按钮变为红色按钮有一个延迟。我假设延迟是因为页面加载时没有加载红色按钮（因此不在浏览器缓存中），因此jquery代码会重新加载它们。因此，如果能通过将它们作为隐藏输入加载、加载到浏览器缓存或任何其他方式来解决此问题，我将不胜感激。

我将加入motor1.gif和motors2.gif，成为motors.gif

---

如果您制作了一个顶部为白色图像，底部为红色图像的图像，则您的

鼠标悬停/mouseover

（ps.check out

hover

）只需更改图像偏移量，无需预加载。

我会将motor1.gif和motors2.gif合并为motors.gif

如果您制作了一个顶部为白色图像，底部为红色图像的图像，则您的

鼠标悬停/mouseover

（ps.签出

悬停

）只需更改图像偏移量，无需预加载。

只需使用图像精灵即可

对于一个菜单按钮，您将拥有一个包含白色和红色图像的图像文件，因此您只需在悬停操作时更改背景位置即可。它非常快，图像加载完全，您不需要使用一些Java脚本，只需要CSS .

只需使用图像精灵即可

对于一个菜单按钮，您将拥有一个包含白色和红色图像的图像文件，因此您只需在悬停操作时更改背景位置即可。它非常快，图像加载完全，您不需要使用一些Java脚本，只需要CSS

---

使用雪碧是最好的解决方案

但是，如果您无法做到这一点，则可以使用以下JavaScript方法（取自Dreamweaver）预加载图像

在html标记之后添加以下内容。

<script type="text/JavaScript">
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];}}
}
</script>

---

使用精灵是最好的解决方案

但是，如果您无法做到这一点，则可以使用以下JavaScript方法（取自Dreamweaver）预加载图像

在html标记之后添加以下内容。

<script type="text/JavaScript">
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];}}
}
</script>

---

你把这些图像连在一起是什么意思？…就像photoshop图层一样。你不能用图片格式。把图片连接在一起是什么意思？…就像photoshop图层一样。图片格式不能这样做。

onload="MM_preloadImages('path of image goes here')"