CSS背景图片加载延迟

Question

I have form like this:

 <form  action="login_form.php"   method="POST"   id="login_form">         
   Email  <input name="email" type="text" size="25" placeholder="type your email"/>
   Password  <input name="password" type="text" size="25" placeholder="type your password" />
             <input type="submit" class="btn" value="" name="submit" />
 </form>

对于提交按钮，我使用了CSS中的图像：

.btnew{
background:url('img/login_button_1_1.jpg') no-repeat; width:270px; height:46px; border:none; cursor: pointer; 
}

.btnew:hover{
background:url('img/login_button_1_1_light.jpg') no-repeat; width:270px; height:46px; border:none; cursor: pointer;
}

当页面加载时，我的表单有一个提交按钮，名称为“login_button_1_1.jpg”。当用户将鼠标放在提交按钮上方时，根据我的 CSS，按钮会成功地更改为“login_button_1_1_light.jpg”。问题是，用户第一次将鼠标放在提交按钮上方时，会出现一个非常小的延迟，直到图像“login_button_1_1_light.jpg”出现。看起来它不是在页面开始加载时就已经加载了。有什么办法可以解决这个问题吗？

- user2491321

---

使用精灵图或显式预加载:hover图片。 - haim770

http://webmasters.stackexchange.com/questions/2280/how-to-pre-load-images-used-only-on-hover - jantimon

请参考以下链接：https://dev59.com/tnM_5IYBdhLWcg3wcSx_ - Andrew

Answer 1

你可以将悬停图像放置在body标签内以预加载它。

<img src="img/login_button_1_1_light.jpg" style="display:none;" />

- Rajnikant Kakadiya