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

I have a page where the menu buttons(which are images) are white but i want them to turn red on hover and back to white onmouseout. So i have the corresponding red menu buttons. So if the white button is motors1.jpg, the red button is motors2.jpg hence the JQuery code below algorithm.

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

The Jquery code is:

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);
   });

});

I have used an external CSS stylesheet for positioning

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

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

So the question: I noticed that there is a lag when the page is first loaded for the white buttons to change to the red ones. I assume the lag is because the red buttons were not loaded on page load(therefore are not in the browser cache) and hence the jquery code reloads them. So any way to solve this by maybe loading them as hidden inputs, loading them to the browser cache would be appreciated or any other way to solve this.

所以问题是:我注意到首次加载页面以使白色按钮变为红色按钮时存在延迟。我假设滞后是因为页面加载时没有加载红色按钮(因此不在浏览器缓存中),因此jquery代码重新加载它们。因此,任何解决这个问题的方法可能是将它们作为隐藏输入加载,将它们加载到浏览器缓存中,或者通过任何其他方式来解决这个问题。

3 个解决方案

#1

Simply use image sprites source

只需使用图像精灵源

You will have for one menu button one image file that will be contains white and red images, so you need only change background-position on hover action. It's very fast, images load fully and you needn't use some javascripts, only CSS .

您将拥有一个菜单按钮,一个图像文件将包含白色和红色图像,因此您只需要更改悬停操作的背景位置。它非常快,图像加载完全,你不需要使用一些javascripts,只有CSS。

#2

Using a sprite is the best solution.

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

However if this is not possible for you, then you can preload images by using the following JavaScript method (taken from Dreamweaver).

但是,如果您无法使用此功能,则可以使用以下JavaScript方法(从Dreamweaver中获取)预加载图像。

Add the following just after your html tag.

在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>

Add the following property to your body tag:

将以下属性添加到body标记:

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

#3

I would do this by joining motor1.gif and motors2.gif to become motors.gif.

我会通过加入motor1.gif和motors2.gif来成为motors.gif。

If you made one image with the white image at the top, and the red image at the bottom, then your mouseover/mouseout (ps. check out hover) just needs to change the image offset, no pre-loading required.

如果你制作了一张图像,顶部是白色图像,底部是红色图像,那么你的鼠标悬停/鼠标移除(ps。检查悬停)只需要改变图像偏移,不需要预加载。

#1