html - 在第一个加载页面加载悬停图片

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

Live example of how sprites works

要进一步了解 background-positions 的实际工作原理，请查看:http://www.w3schools.com/cssref/pr_background-position.asp