在第一个加载页面中加载悬停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

你可以使用sprite,然后设置你的背景,background-position这样一切都会在第一时间加载.

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

这是一个很好的例子:

代码应该是这样的:

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

精灵如何运作的实例

有关如何background-positions实际工作的进一步阅读,请看一下:http://www.w3schools.com/cssref/pr_background-position.asp