css background image delay on load

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>

and for submit button I use an image that is in my 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;
}

When page loading my form has as a submit button, the "login_button_1_1.jpg". When the user place mouse over the submit button, button changes to "login_button_1_1_light.jpg" successfully acording to my CSS. My problem is that the first time that the user places mouse over submit button, there is a very small delay until the image "login_button_1_1_light.jpg" appears. looks like it is not loaded with the page at the begining. Any idea how to fix this?

http://webmasters.stackexchange.com/questions/2280/how-to-pre-load-images-used-only-on-hover — jantimon, Dec 05 '13 at 11:25
see this: http://stackoverflow.com/questions/1373142/preloading-css-background-images — Andrew, Dec 05 '13 at 11:26

score 1 · Accepted Answer · answered Dec 05 '13 at 11:29

1

You can place hover image inside body tag to preload it.

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

answered Dec 05 '13 at 11:29

Rajnikant Kakadiya

2,185
1
23
30

css background image delay on load

1 Answers1