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;" />

css背景图像加载延迟

1 个答案: