Solved

Preload Images...

Posted on 2012-04-12
8
289 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
8 Comments
 
LVL 10

Expert Comment

by:aboo_s
Comment Utility
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
Comment Utility
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 28

Accepted Solution

by:
sammySeltzer earned 500 total points
Comment Utility
<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
 
LVL 5

Author Comment

by:Aanvik
Comment Utility
Sorry... Its not working... it;s still behaving the same loading image on hover...
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 28

Expert Comment

by:sammySeltzer
Comment Utility
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
Comment Utility
Try this code.

demo.php
0
 
LVL 23

Expert Comment

by:basicinstinct
Comment Utility
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
Comment Utility
It worked. I only moved this code just below the <body> tag without using onload function.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now