如何处理HTML、CSS中PNG图片的加载时间

Question

当我将一个 <a> 标签设置为特定的图像背景时，代码如下：

HTML:
<a href="..." title="click here">Click Here</a>

CSS:
a {
  background: transparent url(button.png);
}

我希望当用户将鼠标悬停在指定位置时，背景能够随之改变，就像这样：

CSS:
a {
  background: transparent url(button_HOVER.png);
}

当用户将鼠标悬停在链接上时，悬停背景图片会闪烁（需要约1-2秒才能完全加载）。

我可以将文件保存为GIF并缩小其大小和加载时间，但这会严重损害我的特定图像（它很大且高度图形化）。

这就是为什么我正在寻找更好的解决方案，例如依靠浏览器缓存图像的能力。因此，我会像这样对按钮应用样式：

CSS:
a {
  background: transparent url(button_HOVER.png);
  background: transparent url(button.png);
}

首先需要缓存图像按钮_HOVER。这似乎影响了“闪烁”，但并没有完全解决问题。我考虑创建一个带有HOVER图像的隐藏标签，这样结果可能会不同。

您认为有更好的解决方法吗？（我强调我想保留文件为PNG格式，它的大小为6-7k）。我的方法有效吗？

- Gal

Answer 1

您的解决方案是将两个图像（悬停和活动）放在同一个图像文件中。它们重叠在一起，也称为图像精灵。浏览器将加载整个图像文件。在悬停时，只需更改背景位置。

假设活动图像位于顶部，悬停图像直接位于其下方... 您的 CSS 代码应如下所示：

a.link {
  width:70px;
  height:24px;
  background: url(image.png) top no-repeat;
}
a.link:hover {
  background-position: bottom;
}

注意background-position属性。在这里，我使用了top和bottom。你也可以指定具体的像素值。在这个例子中，整张图片的宽度为70像素，高度为48像素。一些网站将所有小图标都放入一个图片中，一次性加载，也可以减少请求次数。

在这种情况下不需要预加载脚本。

- Lyon

---

这也是一个不错的解决方案，我同意。 - Amr Elgarhy

太棒了！这是一个我没有想到的绝妙解决方案，非常感谢！ - Gal

Answer 2

基本可用的选项是使用对观看者隐藏的HTML元素，或使用JavaScript。

HTML方法可能是最简单的：

<div id="preloadedImageContainer">
<img src="img/to/preload_1.png" />
<img src="img/to/preload_2.png" />
</div>

with the css:
#preloadedImageContainer {position: absolute; top: -1000px; left: -1000px; }

或者，使用 JavaScript：

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

jQuery的方法完全来自于这个网页：http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript。

虽然最好的方法可能是像Lyon建议的那样，使用CSS图像精灵。

- David Thomas

Answer 3

你应该搜索一下这个主题"预加载图片"，你会发现用CSS和JavaScript预加载图片的方法。
我相信，如果你在页面中放置一个隐藏的图像，并将其源设置为CSS文件中将使用的PNG图像的src，则这将使得当页面加载时，图片将被加载，并且CSS工作只是切换预加载的图片。

- Amr Elgarhy