Firefox或Safari不會重新加載樣式表圖像

我們發現Firefox（至少v3）和Safari無法正確緩存從css文件引用的圖像。圖像被緩存，但不會刷新，即使您在服務器上更改它們。一旦Firefox在緩存中有圖像，它將永遠不會檢查它是否已經改變。Firefox或Safari不會重新加載樣式表圖像

我們的CSS文件是這樣的：

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

的問題是，如果我們現在改變newsitem_background.jpg圖像，所有的Firefox用戶將仍然使用舊的圖像，除非他們明確地刷新頁面。另一方面，IE會檢測到圖像已更改並自動重新加載。

這是一個已知的問題？任何解決方法？謝謝！

編輯：解決方案是不按F5。我可以做這個。但我們的客戶只會訪問我們的網站，並獲取舊的，過時的圖形。他們如何知道他們需要按F5？

我已經安裝了Firebug並確認了我已經懷疑的東西：Firefox甚至不嘗試從css文件中檢索引用的圖像，以確定它們是否已被更改。當你按下F5時，它會檢查所有圖像，並且網絡服務器很好地響應304，除了那些已更改，其響應200 OK。

那麼，有沒有辦法敦促火狐自動更新從css文件引用的圖像？當然，我不是唯一有這個問題的人？

EDIT2：我測試這個本地主機與和圖像響應不包含任何緩存的信息，它是：

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或大多數瀏覽器會假定圖像不會經常更改（過期頭和全部）。

來源

2008-10-14 Frederik Slijkerman

我只是將一個查詢字符串值添加到圖像url。我通常只是創建一個「版本號」，每次增加它的圖像變化：

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

來源

2008-10-14 12:25:50

我們已經走過了同樣的結論在這裏。我們需要向圖片網址添加一些字符串。 – mark 2010-01-14 11:00:34

使用ctrl + f5重新加載 – 2010-03-21 03:51:19

嘗試在按住SHIFT鍵的同時單擊重新加載（或按F5鍵）。

否則，使用Firebug等工具檢查HTTP請求/響應頭並觀察控制緩存的頭值。我從來沒有注意到這個問題。也許你的服務器正在返回一個304響應（未修改）。

來源

2008-10-14 09:19:29

這是解決不了問題，請編輯的問題 – 2008-10-14 11:05:50

我知道這可能不是你想要聽到的，但它更有可能是Firefox遵循標準，而IE做的事情有點奇怪（你只是碰巧依賴它））。

緩存行爲取決於與圖像一起發送的緩存標題。如果您可以發佈標題（或其中一個圖像的URL），那麼我們將能夠更具體地告訴您發生了什麼。

來源

2008-10-14 09:23:27 Dan

驗證您正在提供的映像上的HTTP標頭以及CSS文件。

如果它們中的任何一個被設置爲緩存（或缺失），您會發現瀏覽器正在緩存文件。

來源

2008-10-14 10:04:36 scunliffe

爲了避免這個問題，我看到網站管理員將版本號添加到他們的文件。所以他們加載site-look-124.css和newsitem_background-7.jpg。

不錯的解決方案，恕我直言。

來源

2008-10-14 12:02:18 PhiLho

這不會解決的火狐沒有檢查如果圖像已經過期的問題，但你可以做什麼，以確保您的客戶看到正確的圖像是：

設置圖像中的CSS的PHP或similiar腳本返回圖像：

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

然後使用腳本返回我用它在我的主服務器上的圖像」

<?php 
$name = isset($_REQUEST['name']) ? $_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);

隨機返回一個背景IMAG e用於我的一些頁面，而Firefox似乎不會緩存這些內容。如果你喜歡，你也可以用圖像做一些時髦的圖形。

來源

2008-10-14 12:22:16 Jrgns

另外一個快速的工作，各地（如果這種情況主要發生在網頁設計的中間）是查看實際的CSS頁面在Firefox中，並重新加載頁面，然後當你返回到網站瀏覽器將讀取當前的CSS頁面。

，當然這是一個臨時的修復只是爲網頁設計師

來源

2009-08-25 14:08:25

Firefox或Safari不會重新加載樣式表圖像

回答

相關問題