Question

我有一个页面，其中菜单按钮（图像）是白色但我希望它们在悬停时变为红色并返回白色onmouseout。所以我有相应的红色菜单按钮。因此，如果白色按钮是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

只需使用图片精灵source

您将拥有一个菜单按钮，其中一个图像文件将包含白色和红色图像，因此您只需要在悬停操作上更改background-position。它非常快，图像加载完全，你不需要使用一些javascripts，只有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（ps。签出hover）只需更改图像偏移量，无需预加载。

在加载时加载和访问所有图像

3 个答案: