ホバーでのみ使用される画像をプリロードする方法は？

ある背景画像で始まり、ホバー時に別の画像に変わるリンクがあります。両方の背景画像がCSSで設定されます。私のブラウザ（いずれか）は、実際にホバーするまでホバー画像をロードしないようです。しかし、その後、数秒間（私の非常に遅い接続で）新しいイメージをロードするのにかかる空白のイメージになります。ホバー時に遅延時間が発生しないように、ブラウザーがホバー画像をプリロードするように促す方法はありますか？

1）CSSスプライトを使用します（これが推奨される方法です）。

2）非表示のdivに画像をロードします。divに画像を配置し、divのCSSを設定しdisplay: none;て非表示にします。

3）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）この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>

私はJavaScriptソリューションがあまり好きではありません-面倒で保守が難しく、もちろんJSを無効にすると完全に失敗します。

最新の解決策はCSSスプライトを使用することです。試してみてください、信じてください。

純粋なCSSを使用して画像をプリロードする方法に関する次のリンクを見つけました。

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

また、ホバーでさまざまな背景画像を変更する必要がある場合に役立ちました。

これをCSSの上に追加します。

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

danpが示唆するようにスプライトのルートに行くと、スプライトを必要とする前にロードする際にまだ問題があります。それは私がスプライトが大好きだということです。簡単に作成するには、Steve Soudersのスプライトツールを使用します。