html - css背景图片加载延迟

Question

我有这样的表格:

 <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”出现之前会有非常小的延迟。看起来它没有在开始时加载页面。知道如何解决这个问题吗？

Answer 1

您可以将悬停图像放在 body 标记内以预加载它。

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