2012-09-28 80 views
14

有沒有辦法確保最近更新的某個背景圖片確實出現在每個人瀏覽器上的最新版本中(而不是存儲在緩存中的舊版本)?強制刷新背景圖片

它必須是一個解決方案,不涉及調用CSS的代碼行(我可以在css文件名後面加上問號和版本號,例如:<link href="styles.css?v=2" rel="stylesheet" type="text/css"/>,但在這種情況下,我沒有訪問這部分代碼)

回答

22

您可以用下面的辦法:

.button { 
    background: url(../Images/button.png?v=1234); 
} 
+1

他指的查詢字符串使用一個隨機數。你知道嗎? – Amir

+0

你不能使用javascript來爲你生成隨機數嗎? – Anshu

+0

是啊! javascript是一個不錯的選擇 – Amir

1

您可以在其他CSS後添加另一個CSS規則,這將覆蓋加載圖像的規則和使用圖像與一個增加的版本號。

稍後加載的CSS規則具有更高的優先級,因此您可以使用與主CSS中相同的選擇器,並且它將覆蓋它。

如果你不能這樣做,那麼你是擰緊。您必須更改加載的圖像的URL,以確保獲取新圖像。

0

您可以在htaccess中添加Expires,但如果圖片真的很大,那麼我會建議您不要這樣做。至於你問沒有CSS,嘗試:

<Files "your_bg.jpg"> 
FileETag None 
<ifModule mod_headers.c> 
Header unset ETag 
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate" 
Header set Pragma "no-cache" 
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT" 
</ifModule> 
</Files> 
1

幾件事我喜歡把這裏

  1. 圖片,JS,在HTML頁面被稱爲CSS文件緩存在瀏覽器基於URL
  2. 變化在URL中將向服務器發出一個新的請求並存儲最新的緩存。

您只需更改URL即可。

雖然您修改了css樣式表,但您需要更新CSS以供參考。

background: url(../Images/button.png?v=1234); 

例: http://www.site.com/css/style.csshttp://www.site.com/css/style.css?ver=002

<link rel="stylesheet" href="css/style.css?ver=002" type="text/css" />