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

【问题标题】：Javascript preload images for css background-image change用于 css 背景图像更改的 Javascript 预加载图像
【发布时间】：2011-10-06 20:12:16
【问题描述】：

我正在开发一个网站，该网站需要 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 背景图像的功能。但问题是当页面第一次加载并且链接第一次悬停时，图像的加载速度很慢。

但是一旦他们加载它就可以无缝运行。我希望这是一个需要加载的问题。那么有没有一种方法可以让我预先加载图像并且仍然使用相同的方法进行悬停。

【问题讨论】：

@alex：这值得一个正确的答案，它确实是解决方案。

标签： javascript css image-preloader

【解决方案1】：

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

这不仅将多个图像转换为一个 HTTP 请求，还意味着您不必费心编写代码来预加载图像的悬停状态。

这称为sprite sheet。

【讨论】：

但是如果我喜欢background: url('../../images/backgrounds/<?= $bg ?>.jpg') center center no-repeat fixed; background-size: cover;。这怎么能与精灵一起工作？

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

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

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

这可能在某处的 window.load 或 dom:ready 事件中

【讨论】：

【解决方案4】：

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

【讨论】：