: How to pre-load images used only on hover? 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

@Karen161

I found this link on how to pre-load images using pure CSS:
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.

Vote Up Vote Down

@Kevin317

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

Vote Up Vote Down

@Pope3001725

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>

Vote Up Vote Down