How to pre-load images used only on hover?

Question

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?

Answer 1

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>

Answer 2

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/

Answer 3

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 ;)