在第一个加载页面中加载悬停pic

Question

我有这个代码的div

式

#input{background:url(../image/main.png)}
#input:hover {background:url(../image/hover.png)}

HTML

<div id="input">input div </div>
<div id="input">input div 2</div>
<div id="input">input div 3</div>
<div id="input">input div 4</div>

当页面加载main.png加载并显示但是当鼠标在div上第一个div黑色并且在2或3秒后hover.png显示。我的背景图片大小不是很大，但也许主机非常弱，无论如何加载两张图片第一次和悬停图片快速显示？

Answer 1

您可以使用精灵，然后使用background-position设置背景，这样一切都会在第一时间加载。

关于精灵的最好的事情是它实际上使你的加载时间更快，因为每个图像都需要单独请求服务器，但如果你只为网络的大部分请求一个文件，你可以大大增加加载时间。

这是一个很好的例子：

代码应该是这样的：

.mydiv:hover{
   background-position:-30px 0px;
}

Live example of how sprites works

如需进一步了解background-positions实际运作方式，请查看以下内容：http://www.w3schools.com/cssref/pr_background-position.asp