スタイルシートの画像はFirefoxまたはSafariで再読み込みされません

StackOverflow https://stackoverflow.com/questions/200470

  •  03-07-2019
  •  | 
  •  

質問

Firefox（少なくともv3）とSafariはcssファイルから参照される画像を適切にキャッシュしないことがわかりました。画像はキャッシュされますが、サーバー上で画像を変更しても更新されません。 Firefoxがキャッシュ内に画像を取得すると、画像が変更されたかどうかを確認しません。

cssファイルは次のようになります。

div#news {
  background: #FFFFFF url(images/newsitem_background.jpg) no-repeat;
  ...
}

問題は、newsitem_background.jpg画像を変更した場合、ページを明示的に更新しない限り、すべてのFirefoxユーザーが引き続き古い画像を取得することです。一方、IEは画像が変更されたことを検出し、自動的に再読み込みします。

これは既知の問題ですか？回避策はありますか？ありがとう！

編集：解決策はF5キーを押さないことです。私がすることができます。しかし、クライアントは当社のWebサイトにアクセスするだけで、古い古いグラフィックスを取得できます。 F5キーを押す必要があることをどのように知るのですか？

Firebugをインストールし、すでに疑っていることを確認しました。Firefoxは、cssファイルから参照されているイメージを取得して、変更されたかどうかを確認することさえしません。 F5を押すと、すべての画像がチェックされ、Webサーバーは have が変更され、200 OKで応答するものを除き、304でうまく応答します。

では、Firefoxにcssファイルから参照されている画像を自動的に更新するように促す方法はありますか？この問題を抱えているのは私だけではないのでしょうか？

EDIT2：これをlocalhostでテストしましたが、イメージレスポンスにはキャッシュ情報が含まれていません。

Server  Microsoft-IIS/5.1
X-Powered-By    ASP.NET
Date    Tue, 14 Oct 2008 11:01:27 GMT
Content-Type    image/jpeg
Accept-Ranges   bytes
Last-Modified   Tue, 14 Oct 2008 11:00:43 GMT
Etag    "7ab3aa1aec2dc91:9f4"
Content-Length  61196

EDIT3：もう少し読みましたが、Firefoxまたはほとんどのブラウザーは画像が頻繁に変更されないと仮定するため（ヘッダーとすべてを期限切れにする）、修正できないようです。

役に立ちましたか？

解決

画像のURLにクエリ文字列値を追加するだけです。通常、「バージョン番号」を作成します。画像が変更されるたびにインクリメントします：

div#news {
  background: url(images/newsitem_background.jpg?v=00001) no-repeat;
  ...
}

他のヒント

このような問題を回避するために、ウェブマスターがファイルにバージョン番号を追加するのを見てきました。そのため、 site-look-124.css および newsitem_background-7.jpg。

を読み込みます。

悪い解決策ではありません、私見。

提供する画像のHTTPヘッダーとCSSファイルを確認します。

それらのいずれかがキャッシュに設定されている（または欠落している）場合、ブラウザがファイルを正しくキャッシュしていることがわかります。

これはおそらくあなたが聞きたいことではないことを知っていますが、Firefoxが標準に従っており、IEが少し奇妙なことをしている可能性がかなり高いです（たまたまそれに依存しているのです;））。

キャッシュの動作は、画像とともに送信されるキャッシュヘッダーによって異なります。ヘッダー（または画像の1つへのURL）を投稿できる場合は、何が起こっているかをより具体的に伝えることができます。

これにより、Firefoxが画像の有効期限をチェックしないという問題は修正されませんが、クライアントに正しい画像が表示されるようにするためにできることは

CSSの画像を、画像を返すPHPまたは類似のスクリプトに設定します。

div#news {
  background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
  ...
}

次に、スクリプトを使用して画像を返します 

<?php
$name = isset(
これにより、Firefoxが画像の有効期限をチェックしないという問題は修正されませんが、クライアントに正しい画像が表示されるようにするためにできることは



 CSSの画像を、画像を返すPHPまたは類似のスクリプトに設定します。



div#news {
  background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
  ...
}




次に、スクリプトを使用して画像を返します

<*>


ホームサーバーで使用して、一部のページの背景画像をランダムに返しますが、Firefoxはこれらをキャッシュしないようです。必要に応じて、画像を使用してファンキーな愚行を行うこともできます。
REQUEST['name']) ? 
これにより、Firefoxが画像の有効期限をチェックしないという問題は修正されませんが、クライアントに正しい画像が表示されるようにするためにできることは



 CSSの画像を、画像を返すPHPまたは類似のスクリプトに設定します。



div#news {
  background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
  ...
}




次に、スクリプトを使用して画像を返します

<*>


ホームサーバーで使用して、一部のページの背景画像をランダムに返しますが、Firefoxはこれらをキャッシュしないようです。必要に応じて、画像を使用してファンキーな愚行を行うこともできます。
REQUEST['name'] : false;
switch($name) {
    case 'newsitem':
        $filename = 'news_item_background.jpg';
    break;
    default:
        $filename = 'common_background.jpg';
    break;
}

header("Content-Type: image/jpeg");
header("Content-Transfer-Encoding: binary");
$fp = fopen($filename , "r");
if ($fp) fpassthru($fp);

ホームサーバーで使用して、一部のページの背景画像をランダムに返しますが、Firefoxはこれらをキャッシュしないようです。必要に応じて、画像を使用してファンキーな愚行を行うこともできます。

もう1つの簡単な回避策（これが主にWebデザインの途中で発生する場合）は、Firefoxで実際のcssページを表示し、ページをリロードします。Webサイトに戻ると、ブラウザーは現在のcssを読み取りますページ。

もちろん、これはウェブデザイナーのための一時的な修正です

Shiftキーを押しながらリロードをクリックします（または F5 を押します）。

それ以外の場合は、Firebugなどのツールを使用してHTTP要求/応答ヘッダーを確認し、キャッシュを制御するヘッダー値を確認します。この問題に気づいたことはありません。サーバーが304応答（変更されていない）を返している可能性があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top