html5加载png图片,如何在html,css中处理PNG图像加载时间

当我有一个< a>标记设置为特定的图像背景,如下所示：

HTML:

Click Here

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);

}

这样首先缓存图像button_HOVER.它似乎影响了“闪烁”,但并非完全.我想可能用HOVER图像创建一个隐藏标签,这样结果可能会有所不同.

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