Javascript预加载图像用于css背景图像更改

Question

我正在开发一个网站,要求div的背景图像在链接悬停时更改.

它的工作方式是:

<a href="index.php" title="Home ">
 <li id="current">
   Home<br \>
   <span class="nav_desc">Text text</span>
 </li>
</a>
<a href="about.php" title="About" id="about-link" 
   onmouseover="hover('about');" 
   onmouseout="hoverClear();">
 <li id="about">
  About<br \>
  <span class="nav_desc">About me</span>
 </li>
</a>
<a href="more.php" title="More" 
   onmouseover="hover('portfolio');" 
   onmouseout="hoverClear();">
 <li id="more">
  More<br \>
  <span class="nav_desc">More More More
  </span>
 </li>
</a>

JS:

function hoverClear(){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect.png)");
}
function hover(hover){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect-"+hover+".png)");
}

因此,当链接悬停时,它会执行更改div背景图像的功能.但问题是当页面首次加载并且链接首次悬停时图像加载缓慢.

但是一旦它们加载就可以无缝地工作.我希望这是一个需要加载的问题.那么有没有一种方法可以预先加载图像,并仍然使用相同的方法悬停.

Answer 1

将图像堆叠为一个图像,然后添加一个类,将图像的背景属性转换为适当的偏移量.

这不仅可以将多个图像转换为一个HTTP请求,还意味着您无需编写代码来预加载图像的悬停状态.

这称为精灵表.