即使没有显示图像，也可以下载图像答案

【问题标题】：Make images be downloaded even if they are not being shown即使没有显示图像，也可以下载图像
【发布时间】：2011-09-22 09:30:11
【问题描述】：

我有一个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，但如果没有其他选择我可以）。

感谢和抱歉我的英语不好。

【问题讨论】：

标签： html css

【解决方案1】：

执行a 和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   |
-------------------

【讨论】：

【解决方案2】：

这里最好的解决方案是使用CSS Sprites。

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

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

【讨论】：

【解决方案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是一篇关于它的文章

【讨论】：