javascript - 加载并访问加载时的所有图像

Question

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

简单地使用图像 Sprite source

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