Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have a link that starts with one background image and then changes on hover to another. Both background images are set in the CSS. My browsers (any of them) don't seem to load the hover image until you actually hover. But then you end up with a blank image for the several seconds (on my very slow connection) it takes to load the new one. Is there a way to encourage the browser to pre-load the hover image so that delay time doesn't occur on hover?

share|improve this question

4 Answers 4

up vote 15 down vote accepted

1) Use CSS Sprites (This is the preferred method).

2) Load the images in a hidden div. Place the images in the div and then set the div's CSS to display: none; to hide it.

3) Load the images with CSS:

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

4) Use this JavaScript

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>
share|improve this answer
    
Is there a way to load them after the page is loaded? So the user doesn't see a loading circle on the cursor? One way would be having a hidden frame that uses javascript to delay the hidden frame to be displayed, such in my question stackoverflow.com/questions/13437091/… but is there a preferred method for delaying and not displaying the loading circle on that cursor? –  guisasso Jan 4 '13 at 17:12
    
Nevermind, I found this perishablepress.com/3-ways-preload-images-css-javascript-ajax and it works flawlessly with time delay. –  guisasso Jan 4 '13 at 19:27

I don't really like the javascript solution - it's messy, difficult to maintain, and of course completely fails when JS is disabled.

The modern solution is to use CSS Sprites - try it, believe me, you'll wonder why you never did this before ;)

share|improve this answer

add this above your css

var images = ['img1.jpg', 'img2.jpg']; for(var i = 0, len = images.length; i

If you got the sprite route as danp suggests you still have an issue with loading the sprite before its needed. That said I love sprites, to easily make them I use the tool from Souders

http://spriteme.org/

share|improve this answer

I found this link on how to pre-load images using pure CSS:

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

And it worked for me when I need to change the different background images on hover.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.