加载并访问所有图像

Question

我有一个页面，其中菜单按钮（是图像）是白色的，但是我希望它们在悬停时变为红色，并在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>

jQuery代码是：

$(document).ready(function(){
   $('.navimg').mouseover(function(){
    source=$(this).attr('src').replace('1','2');
    $(this).attr('src',source);

   }).mouseout(function(){
    source= source.replace('2','1');
    $(this).attr('src',source);
   });

});

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

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

所以问题来了：我注意到页面首次加载时出现滞后，白色按钮变为红色按钮。 我认为滞后是因为页面加载时未加载红色按钮（因此不在浏览器缓存中），因此jquery代码重新加载了它们。 因此，通过将它们加载为隐藏输入，将其加载到浏览器缓存中来解决此问题的任何方法都将受到赞赏，或通过任何其他方法来解决此问题。

Answer 1

只需使用图像精灵源

对于一个菜单按钮，您将拥有一个包含白色和红色图像的图像文件，因此您只需在悬停操作上更改background-position 。 速度非常快，图像完全加载，您不需要使用某些javascript，而只需使用CSS。

Answer 2

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

但是，如果您无法做到这一点，则可以使用以下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>

将以下属性添加到您的body标签：

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

Answer 3

我可以通过加入motor1.gif和motors2.gif成为motors.gif来实现。

如果您制作的一幅图像的顶部为白色图像，底部为红色图像，则只需将mouseover/mouseout （请检查hover ）即可更改图像偏移量，而无需预加载。