CODEWITHSUNDEEP
htmlcss
user2491321
user2491321

Reputation: 673

css background image delay on load

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?

Upvotes: 4

Views: 2628

Answers (1)

Rajnikant Kakadiya
Rajnikant Kakadiya

Reputation: 2265

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

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

Upvotes: 1

Related Questions