Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 330
  • Last Modified:

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

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

0
Aanvik
Asked:
Aanvik
1 Solution
 
aboo_sCommented:
use javascript's onload function:

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

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

 }
0
 
sammySeltzerCommented:
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers 
function preload() 
 {
Image1= new Image(125,50)  //change to correct width,height
Image1.src = "http://somename.com/images/btn-login.png"

Image2 = new Image(125,50) //change to correct width,height
Image2.src = "http://somename.com/images/btn-login-hove.png"
}
// End Hiding -->
</SCRIPT>  

Open in new window


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

Open in new window

0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
AanvikAuthor Commented:
Sorry... Its not working... it;s still behaving the same loading image on hover...
0
 
sammySeltzerCommented:
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) { 
    $(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' 
]); 

Open in new window

0
 
Atique AnsariCommented:
Try this code.

demo.php
0
 
basicinstinctCommented:
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/
0
 
AanvikAuthor Commented:
It worked. I only moved this code just below the <body> tag without using onload function.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now