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请求，还意味着您无需编写代码来预加载图像的悬停状态。

这称为sprite sheet。

Answer 2

您可以制作精灵图像，即将两个图像合并为一个。然后，您只需更改背景位置即可显示图像的其他部分。如果元素例如高20像素，则将背景位置移动20像素：

function hoverClear(){
  $('.navReflect').css("background-position", "0 0");
}

function hover(hover){
  $('.navReflect').css("background-position", "0 -20px");
}

因为它只是一个图像，所以从一开始就加载了备用外观。这也将减少对服务器的请求数量。

你可以像这样把更多的图像放在一起。您可以在my website的右上角看到一个示例，其中单个图像用于两个不同的标记，每个标记处于两种不同的状态。

Answer 3

预加载图片非常简单，例如：

var img = new Image();
img.src = "/path/to/image.jpg";

这可能是在window.load或dom：ready事件的某个地方

Answer 4

您可以使用此解决方案。 http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

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

4 个答案: