jQueryを使用してクラスでdivに背景画像をプリロードする最良の方法は何ですか?
<div id="wrapper" class="first">
</div>
.first {background:url(/image.jpg) repeat-x top center}
Image オブジェクトまたは非表示の DIV 内の IMG タグを使用して、通常の画像としてプリロードするだけです。次に、作業中の DIV のクラスを、事前に読み込まれた画像の 1 つの CSS バックグラウンドを持つクラスに変更すると、クライアント キャッシュからプルされます。
.preload { display: none; }
...
<div>
<img src="a.png" class="preload" />
<img src="b.png" class="preload" />
</div>
HTMLマークアップを変更せずにプリロードしたい場合は、jQueryを使用してこれを行うことができます。
$(function(){
$('<img/>')[0].src = "/image.jpg";
});
多数の個別の画像ファイルを使用する代わりに画像全体を使用したり、CSS の背景位置機能の xpos パラメーターと ypos パラメーターを使用したりできます。この場合、1 つのイメージ ファイルが 1 回だけロードされます。あとは CSS とクラスに任せましょう。以下に例を示します。
/*this is the style*/
<style type="text/css">
.first {
background: url(.....) no-repeat 0px 0px;
}
.second {
background: url(.....) no-repeat -200px -200px;
}
</style>
<div id="wrapper" class="first"></div>