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 显示时。我的背景图片尺寸不大，但也许主机很弱，第一次加载两张图片并快速悬停图片显示？

score 5 · Accepted Answer

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

sprite 最好的一点是它实际上使您的加载时间更快，因为每个图像都需要向服务器单独请求，但是如果您对大多数网站只请求一个文件，则可以显着增加加载时间。

这是一个很好的例子：

在此处输入图像描述

代码将类似于：

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

有关background-positions实际工作原理的进一步阅读，请查看以下内容：http ://www.w3schools.com/cssref/pr_background-position.asp

1 回答 1