ホバー要素があります。マウスオーバーすると、背景画像が変化します。これは問題ありませんが、前ではなく、マウスオーバーしたときに画像が読み込まれ、しばらくの間空白のボックスが表示されます。画像をプリロードするにはどうすればよいですか？
2 に答える
2
あなたの体の初めに、隠された画像をロードします：
<body>
<img src="myimage.png" style="display: none;" />
</body>
ブラウザはキャッシュを使用して、同じ画像をキャッチし、呼び出したときに背景としてロードします。したがって、遅延は発生しません。
于 2013-03-24T11:47:54.710 に答える
2
その場合はbackground-image、次のいずれかの手法を使用できます。
テクニック＃1
要素の通常の状態で画像をロードし、背景の位置で画像をシフトするだけです。次に、背景位置を移動してホバーに表示します。
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }
テクニック＃2
問題の要素にすでに背景画像が適用されていて、その画像を変更する必要がある場合、上記は機能しません。通常、ここでスプライト（組み合わせた背景画像）を選択し、背景の位置をシフトするだけです。しかし、それが不可能な場合は、これを試してください。すでに使用されているが背景画像がない別のページ要素に背景画像を適用します。
#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
出典：
于 2013-03-24T11:54:10.930 に答える