javascript - 在页面加载时加载图像，CSS

Question

我最近问了一个关于使用 Java Script 使用图像作为按钮的问题。我得到的答案让我改用 CSS 并且工作正常。然而，我使用的图像加载大约需要 0.2 秒。

在我使用这段代码之前，我让我的页面在开始时加载所有图像，然后一个 JS 脚本在某些鼠标事件下修改图像的 zIndex，但是这会覆盖 href 链接并且无法工作。

使用新代码，所有功能都可以正常工作，因此会添加 href，但每次页面加载时仅加载第一个图像，当触发鼠标事件时，我正在加载此图像下使用的其他 2 个图像。这意味着执行操作时按钮会闪烁。我如何修改此代码以在页面加载的同时加载图像？

代码在这里:http://jsbin.com/casoy/12/edit?html,css,output

我认为我应该显示旧代码，因为我们...:http://jsbin.com/casoy/13/edit?html,css,js,output

Answer 1

只有触发css样式才会调用下载图片

有几种方法可以做到这一点，并根据您的喜好组织 html，

- here is a crude example using your code 来说明原理。

标记

<div class="preload1"></div>
<div class="preload2"></div>

<a href="http://officialacescottie.co.uk/Home/Home.html">click me</a>

*CSS *

a {
  display: block;
  width: 600px;
  height: 114px;
  background-image:url("/Buttons/Home.gif");
  text-indent: -9999px;
  outline: 0;
}
a:hover, .preload1 {
  background-image:url("/Buttons/HomeP.gif");
}
a:active, .preload2 {
  background-image:url("/Buttons/HomeC.gif");
}
/* hide these off page in a way that 
   the browser will still call the background-image */
.preload2, .preload1 {
  position:absolute; left:-9999px; top:-9999px;
}

/* image urls are shortened here only so it presents better on SO */

这显示了基本原理，即当 a:hover 被触发时，引用的背景图像已经有机会“预加载”到浏览器缓存。