ある背景画像で始まり、ホバー時に別の画像に変わるリンクがあります。両方の背景画像がCSSで設定されます。私のブラウザ(どれでも)は、実際にホバーするまでホバー画像をロードしないようです。しかし、その後、数秒間(私の非常に遅い接続で)空白のイメージが作成され、新しいイメージをロードするのに時間がかかります。ホバー時に遅延時間が発生しないように、ブラウザーにホバー画像を事前に読み込むように促す方法はありますか?
1) CSS Sprites を使用します(これが推奨される方法です)。
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 Sprites を使用することです-試してみてください、信じてください。
純粋なCSSを使用して画像をプリロードする方法に関する次のリンクを見つけました。
http://www.thecssninja.com/css/even-better-image-preloading-with-css2
また、ホバーでさまざまな背景画像を変更する必要がある場合に役立ちました。