html - 如何在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 并缩小其大小和加载时间，但是 would harm my specific image tremendously (它很大而且高度图形化)。

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

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

这样图片button_HOVER首先被缓存。它似乎影响了“闪烁”，但并不完全。我想也许用悬停图像创建一个隐藏标签，这样结果可能会有所不同。

您认为有更好的解决方法吗？ (我强调我想将文件保留为 PNG，它重 6-7k)。我的方法有效吗？

Answer 1

您的解决方案是将两个图像(悬停和事件)放在同一个图像文件中。位于彼此之上。也称为图像 Sprite 。浏览器将加载整个图像文件。悬停时，您只需更改背景位置。

假设事件图像位于顶部，悬停图像位于其正下方..您的 CSS 代码类似于:

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

注意背景位置。这里我使用顶部和底部。您也可以精确地以像素为单位指定。此示例中的整个图像的宽度为 70 像素，高度为 48 像素。一些网站将他们所有的小图标放在一张图片中。完全加载，也节省了请求。 :)

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