Aanvik
asked on
Preload Images...
Hi
I have a login page where the login button has a hover image... and on a slow connection it takes time to display the hover image when someone moves mouse over it.
I was wondering if anyone can help me with the image preload.
Following code shows the login button and css code snippet... Thank you for looking into it.
I have a login page where the login button has a hover image... and on a slow connection it takes time to display the hover image when someone moves mouse over it.
I was wondering if anyone can help me with the image preload.
Following code shows the login button and css code snippet... Thank you for looking into it.
<div class="btn-login">
<button></button>
<p class="orange"><a href="forgot-pass.asp" class="orange">Forgot Password</a></p>
</div>
.btn-login{padding:25px 0 0 0px;}
.btn-login button{width:90px!important; height:26px; border:0px!important;float:left; background:none; background:url(../images/btn-login.png) left top no-repeat;}
.btn-login button:hover{width:90px!important; height:26px; border:0px!important;float:left; background:none; background:url(../images/btn-login-hove.png) left top no-repeat;}
.btn-login p{font-size:11px;padding-bottom:20px; float:left; padding-top:3px;}
ASKER
thank you.. Can you please use the above 2 images and provide the solution...
something like the following?
function preload()
{
Image = new Image();
Image.src = "../images/btn-login.png";
Image1 = new Image();
Image1.src = "../images/btn-login-hove. png";
}
something like the following?
function preload()
{
Image = new Image();
Image.src = "../images/btn-login.png";
Image1 = new Image();
Image1.src = "../images/btn-login-hove.
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Sorry... Its not working... it;s still behaving the same loading image on hover...
Is your server using ssl certificates?
if yes, then this will never work.
Otherwise, go to browser, tools, internet options, Advanced, then make sure that "Empty Temporary Internet Folders..." is not enabled.
The codes you are given works even better than caching and if it isn't working, then you have server issues.
You can also try using jquery:
if yes, then this will never work.
Otherwise, go to browser, tools, internet options, Advanced, then make sure that "Empty Temporary Internet Folders..." is not enabled.
The codes you are given works even better than caching and if it isn't working, then you have server issues.
You can also try using jquery:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'images/btn-login.png',
'images/btn-login-hove.png'
]);
the way to get around this problem ENTIRELY is to base64 encode those images into the css file using data URLs.
http://css-tricks.com/data-uris/
http://css-tricks.com/data-uris/
ASKER
It worked. I only moved this code just below the <body> tag without using onload function.
function preload()
{
Image = new Image();
Image.src = "myimage.jpg";
}
<body onLoad="javascript:preload