0

ユーザーが多くのdivの背景画像を変更してプレビューを生成するこのWebサイトがあります。問題は、最初に背景画像を別のものに変更したとき、画像が読み込まれるまでに少し時間がかかることですが、その後元に戻すと、すべてが非常にスムーズに見えます。

この問題を解決するために CSS スプライトを使用するつもりでしたが、実際に試してみると、その大きな画像を処理できず、一部のブラウザがフリーズしそうになりました。

私の質問は、CSS スプライトを使用せずに、これらの特定の背景画像をプリロードするにはどうすればよいですか?

編集：

わかりにくかったらすみません。私が作成しているのは、キャラクター作成画面のようなものです。私がやろうとしているのは、ページが読み込まれるときに、ユーザーがなりたい人種を選択できるようにすることです。その際、ローダーが表示され、そのレースに関連するすべての画像がプリロードされるようにします。それが完了したら、ローダーを削除して、ユーザーが自分のキャラクターをさらにカスタマイズできるようにします。

ユーザーがキャラクターをカスタマイズすると、キャラクター div の背景画像がプリロードされた画像の 1 つに変わります。以下で説明するRustamの方法を使用して、JavaScript で画像を読み込もうとしましたが、同じ結果が得られます。背景画像が初めて表示されるときは、読み込みに 1 秒かかります。

4

5 に答える 5

1

jsでページロード後にそれらをキャッシュします。

于 2012-07-14T18:16:17.863 に答える
1

ここを参照してください: CSS のみの画像のプリロード- 重要なのは、必要なすべての画像を他の div の背景として読み込むことですが、div はページから「隠されています」。

要素の通常の状態で画像を読み込み、背景の位置だけをずらします。次に、ホバー時に表示するように背景の位置を移動します。

#img1 { background: url(images/img1.png) no-repeat -9999px -9999px; }
#img2 { background: url(images/img2.png) no-repeat -9999px -9999px; }
于 2012-07-14T18:16:44.510 に答える
0

画像をプリロードする Javascript の方法:

var img = document.createElement("img");
img.setAttribute('src', 'image_path');

// Load event
img.onload=function(){ alert("It's loaded!") };
于 2012-07-14T18:24:01.657 に答える
0

そのために Web Workers を使用し、別のスレッドでバックグラウンドのすべての画像をプリロードします。これを使用すると、ブラウザ UI をブロックせず、ワーカーが終了したら画像を使用できます。

こちらをご覧ください http://www.html5rocks.com/en/tutorials/workers/basics/

于 2012-07-14T18:33:21.533 に答える
0

javascriptなしでやりたい場合は、html invisible に入れる唯一の方法<img>です。このような：

<div style="overflow:hidden;height:0;"><img/><img/><img/><img/></div>

ただし、一部のブラウザでは読み込めないため、div を で非表示にしないでください。display:nonevisibility:hidden

于 2012-07-14T18:15:03.617 に答える