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