1

ユーザーが画面の特定の領域にカーソルを合わせると、divを作成し、背景を設定します。

div= document.createElement('div');

if (yellowBg) {
    div.style.backgroundImage = 'url(\'../partHoverBgYellow.png\')';
}
else {
    div.style.backgroundImage = 'url(\'../partHoverBg.png\')';
}

parent.appendChild(div)

FirefoxとIEでは、背景画像は初めてフェッチされた後にキャッシュされます。

しかし、Chromeでは、キャッシュされていないように見えます。その結果、divは毎回背景が設定される前に表示されます。

Fiddlerを使用して確認しましたが、実際に毎回画像が取得されます。

これを防ぐ方法はありますか？

4

3 に答える 3

3

cssを使用して背景を設定し、コード内のclassNameのみを変更してみてください。このjsfiddleは、そのためのアイデアを示しています。Chromeデベロッパーツールの[ネットワーク]タブで、最初の読み込み後、画像がキャッシュから読み込まれることがわかります。

コードは次のように単純になります。div.className = yellowBG ? 'yellowBG' : '';

このjsfiddleでは、画像がプリロードされています。

于 2012-08-17T08:17:13.593 に答える
0

http://jsfiddle.net/X8SkS/3/を参照してください

もし、するなら

var img=document.createElement('img');
var urls=["../partHoverBgYellow.png","../partHoverBg.png"];
img.src=urls[0];
img.src=urls[1];

ドキュメントが読み込まれると、ブラウザが画像をダウンロードするので、

div.style.display = 'block';

Chromeの画像はキャッシュにdiv保存され、とその背景が同時に表示されます。

于 2012-08-14T15:59:47.130 に答える
0

サーバーから送信されるヘッダーを制御できる場合は、以下を含めます。

Cache-control: public; max-age=31536000

したがって、画像はクライアント側で1年間キャッシュされます。これは、すべてのブラウザで実装する必要のある方法とセマンティクスです。詳細については、W3Cのドキュメントを参照してください。

また、このヘッダーを使用すると、前述のイメージを更新できなくなることに注意してください。

于 2012-08-14T17:16:58.377 に答える