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». Когда пользователь нажимает кнопку «отправить», кнопка «login_button_1_1_light.jpg» автоматически переходит на мой CSS. Моя проблема заключается в том, что в первый раз, когда пользователь нажимает кнопку мыши над кнопкой отправки, происходит очень небольшая задержка, пока не появится изображение «login_button_1_1_light.jpg». похоже, что он не загружен страницей в начале. Любая идея, как это исправить?

Answer 1

Вы можете разместить изображение с наведением внутри метки body, чтобы предварительно загрузить его.

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