CSSの背景画像を読み込むときに遅延が発生する

Question

バックグラウンド画像をクリックすると、ウェブサイトのタブがいくつか表示されます。

DOMをロードした後に最初にタブにカーソルを合わせると、ホバーイメージが表示されるまで少し時間がかかり、つまらない結果になります。

私はこの問題の解決方法を知りません。 :)

ライブ例：http://jsfiddle.net/timkl/fjupq/ - 遅延はJSFiddleのサーバーではそれほど長くありませんが、まだそこにあります。

Answer 1

これを解決するには、別々の画像の代わりにスプライトを使用します。あなたは、単一のイメージを使用し、代わりに:hoverの背景ソースを変更するので、あなたは、単に背景位置を変更

• http://css-tricks.com/css-sprites/

。このようにして、画像全体が予めロードされる。

たとえば、スタックオーバーフローのスプライトシートをチェックアウト：

• http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4

をあなたはこの極端にそれを取る必要はありません、あなただけの通常の両方を持って一つの画像を持つことができますおよび:hoverの状態を左右または上/下に移動します。

Answer 2

単純な解決策は、画像をプリロードするためにjavascriptを使用することです。これをページのHEADに含めてください：

<script type="text/javascript"> 
    var img = new Image(); 
    img.src = "http://dummyimage.com/200x10/000000/fff"; // background image 
</script>