Question

我有一个HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title/>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
  <style type="text/css">
    a.button {
      background: url('button.png') repeat-x;
    }
    a.button:hover {
      background: url('button_hover.png');
    }
  </style>
</head>
<body>
  <p><a class="button" href="#">Button</a></p>
</body>
</html>

我悬停按钮时只会下载图片button_hover.png。 I know that it is the default browser behaviour.
有没有办法强制下载图像？如果有，怎么样？（我不想使用JavaScript，但如果没有其他选择，我可以。）

谢谢，抱歉我的英语不好。

Answer 1

此处的最佳解决方案是使用CSS Sprites。

您的按钮的两种状态都在一张图片中，因此您的:hover图片会自动下载。

更不用说您将获得的其他实质性好处，例如只需为整个菜单下载一个图像，而不是每个按钮下载两个图像，从而提高页面加载速度。

Answer 2

执行a＆amp;的标准方式a:hover状态是使用包含图像两种状态的精灵。然后，您不必为悬停状态加载图像（这真的很难看），而是同时获得两个“图像”。

a.button {
  background: url('button.png') repeat-x;
  background-position: 0px 0px;
}
a.button:hover {
  background: url('button.png') repeat-x;
  background-position: 0px  YYpx; /* X, Y offsets */

}

您的合并背景图片现在看起来像这样：

-------------------
|  active state   |
-------------------
|   hover state   |
-------------------

Answer 3

这可以通过使用Javascript预加载图像来完成：

<script language = "JavaScript">
function preloader() {heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg";}
</script>
</head><body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'"><img name="img01"src="justanotherfile.jpg"></a>

Here是关于它的文章

即使没有显示图像，也要下载图像

3 个答案: