Preload Images...


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">
                            <p class="orange"><a href="forgot-pass.asp" class="orange">Forgot Password</a></p>

Open in new window

.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;}

Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

use javascript's onload function:

function preload()
 Image = new Image();
 Image.src = "myimage.jpg";

<body onLoad="javascript:preload()">
AanvikAuthor Commented:
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";

<!-- hide from none JavaScript Browsers 
function preload() 
Image1= new Image(125,50)  //change to correct width,height
Image1.src = ""

Image2 = new Image(125,50) //change to correct width,height
Image2.src = ""
// End Hiding -->

Open in new window

<body onLoad="javascript:preload()">

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

AanvikAuthor Commented:
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:

function preload(arrayOfImages) { 
        $('<img/>')[0].src = this; 
        // Alternatively you could use: 
        // (new Image()).src = this; 
// Usage: 

Open in new window

Atique AnsariCommented:
Try this code.

the way to get around this problem ENTIRELY is to base64 encode those images into the css file using data URLs.
AanvikAuthor Commented:
It worked. I only moved this code just below the <body> tag without using onload function.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.