Question

我正在建立一个使用各种css-sprites的网站。但我的问题是，当我对上传的图像进行任何更改时，有时它不会反映在客户端浏览器上，因为有时页面及其数据如css，图像，javascripts都是从浏览器缓存中加载的。

请建议我在这种情况下该怎么做。我应该把这些

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

HTML页面中的

？

或者有任何想法可以解决这个问题吗？

Answer 1

当我在网页中使用动态图像时，我总是在URL的末尾添加一个带有随机值的参数，以强制浏览器（尤其是IE）从服务器中检索新的图像。

image.jpg?v=<random num>-<random num>-<random num>-<random num>

您的图片网址看起来像

src="image.jpg?v=1234-5678-91011"

我通过Javascript控制的随机数。任何随机参数值约定当然都可以，这只是我的首选格式。希望这会有所帮助。

Answer 2

如果问题仅出在开发页面：

时

您可以在任何现代浏览器上使用 Ctrl + F5 组合键清除页面缓存，然后刷新页面

通过执行此操作，将再次从服务器下载任何CSS脚本，Javascript脚本和图像文件。

Answer 3

要求您的客户在Chrome上以隐身模式查看时查看您的更改....这应该可以解决问题......

https://support.google.com/chrome/answer/95464?hl=en

Answer 4

change the name of the picture each time you upload or add a random number to it

src="myimage.jpg?{somerandomnumber}"

More info

HTML Cache control

或

标记以关闭所有浏览器中的缓存 Useful HTML Meta Tags

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

您的.htaccess文件。

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 days"
</IfModule>
## EXPIRES CACHING ##

Answer 5

您还应该检查页面发送的标题。缓存可以而且令人头疼，因为当浏览器面向服务器端缓存头时，常常使用与您拥有的标记类似的HTML缓存标记。

检查您是否是Mac OS，Ubuntu或CentOS等Unix / Linux计算机的最佳方法是将curl与-I参数一起使用。例如，以下是用于检查Google时curl -I的输出：

curl -I https://www.google.com/

HTTP/1.1 200 OK
Date: Thu, 05 Jun 2014 04:59:23 GMT
Expires: -1
Cache-Control: private, max-age=0
Content-Type: text/html; charset=ISO-8859-1
Set-Cookie: PREF=ID=926cae6eb35d6ed1:FF=0:TM=1401944363:LM=1401944363:S=QXyixlyAVYyBE4TK; expires=Sat, 04-Jun-2016 04:59:23 GMT; path=/; domain=.google.com
Set-Cookie: NID=67=DxR2KWNdGhQ_u3QCtFUK1TH4dTmef-FfFP67FZiKFDIFJqsdYMPo-3w3mqGD4Iag2t-c-ae1LiNrcX4JslRsxWYCqhBvu0g0tEUA4dKpb07keOkXsAG7uBLynWvN3wzA; expires=Fri, 05-Dec-2014 04:59:23 GMT; path=/; domain=.google.com; HttpOnly
P3P: CP="This is not a P3P policy! See http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657 for more info."
Server: gws
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Alternate-Protocol: 443:quic
Transfer-Encoding: chunked

注意Expires: -1这基本上意味着页面不会被缓存。现在查看Google徽标PNG图片的标题：

curl -I https://www.google.com/images/srpr/logo11w.png

HTTP/1.1 200 OK
Content-Type: image/png
Content-Length: 14022
Last-Modified: Wed, 09 Oct 2013 01:35:39 GMT
Date: Thu, 05 Jun 2014 04:56:40 GMT
Expires: Thu, 05 Jun 2014 04:56:40 GMT
Cache-Control: private, max-age=31536000
X-Content-Type-Options: nosniff
Server: sffe
X-XSS-Protection: 1; mode=block
Alternate-Protocol: 443:quic

请注意该图片具有更具体的Cache=Control和Expires:设置。

因此，我建议您使用curl -I来查看相关内容。可能存在妨碍HTML更新的服务器设置，只能在服务器级别上覆盖。

从服务器获取图像时缓存问题

5 个答案: