如何在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.它似乎影响了"闪烁",但并非完全.我想可能用HOVER图像创建一个隐藏标签,这样结果可能会有所不同.

你认为有更好的解决方法吗？(我强调我想把文件保存为PNG,重量为6-7k).我的方法有效吗？

Answer 1

您的解决方案是将两个图像(悬停和活动)放在同一个图像文件中.位于彼此之上.也称为Image Sprites.浏览器将加载整个图像文件.悬停时,您只需更改背景位置即可.

假设活动图像位于顶部,并且悬停图像位于该图像的正下方..您的css代码将类似于:

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

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

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