?
Solved

Preload Images...

Posted on 2012-04-12
8
Medium Priority
?
322 Views
Last Modified: 2012-04-13
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
Comment
Question by:Aanvik
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 10

Expert Comment

by:aboo_s
ID: 37837389
use javascript's onload function:

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

<body onLoad="javascript:preload()">
0
 
LVL 5

Author Comment

by:Aanvik
ID: 37837456
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
 
LVL 29

Accepted Solution

by:
sammySeltzer earned 2000 total points
ID: 37837524
<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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Author Comment

by:Aanvik
ID: 37837803
Sorry... Its not working... it;s still behaving the same loading image on hover...
0
 
LVL 29

Expert Comment

by:sammySeltzer
ID: 37838026
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
 
LVL 7

Expert Comment

by:Atique Ansari
ID: 37841391
Try this code.

demo.php
0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 37842248
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
 
LVL 5

Author Closing Comment

by:Aanvik
ID: 37843557
It worked. I only moved this code just below the <body> tag without using onload function.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question