Проблемы с кэшем при получении изображений с сервера

Question

Я создаю веб-сайт, на котором используются различные css-спрайты. Но моя проблема в том, что когда я делаю какие-либо изменения в загруженном изображении, иногда оно не отражается в браузере клиента, потому что иногда страницы и их данные, такие как CSS, изображения, JavaScript, загружаются из кэша браузера.

Пожалуйста, предложите мне, что делать в этом случае. Должен ли я положить эти

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

на странице HTML?

или есть идея решить эту проблему?

Answer 1

Вы также должны проверить заголовки, отправляемые страницей. Кэширование может - и является головной болью, потому что часто HTML-теги кэширования, подобные тем, которые у вас есть, обрабатываются по-разному, когда браузер сталкивается с заголовками кэширования на стороне сервера.

Лучший способ проверить, являетесь ли вы Unix/Linux-машиной, такой как Mac OS, Ubuntu или CentOS, - это использовать curl с -I параметр. Например, здесь вывод curl -I когда используется для проверки Google:

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, которые действительно могут быть переопределены только на уровне сервера.

Answer 2

Попросите клиента просмотреть ваши изменения при просмотре в режиме инкогнито в Chrome.... это должно решить проблему...

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

Answer 3

Если проблема только при разработке страницы:

Вы можете использовать комбинацию клавиш Ctrl+F5 в любом современном браузере, который очищает кэш страницы, а затем обновляет страницу.

При этом любой сценарий CSS, сценарий Javascript и файл изображения будут снова загружены с сервера.

Answer 4

Когда я работаю с динамическими изображениями на веб-страницах, я всегда добавляю параметр со случайным значением в конце URL-адреса, чтобы браузер (особенно IE) получал изображение, свежее с сервера.

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

URL вашего изображения будет выглядеть примерно так

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

Случайные числа, которыми я управляю через Javascript. Любое соглашение о случайных значениях параметра будет работать, конечно, это мой предпочтительный формат. Надеюсь это поможет.

Answer 5

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

src="myimage.jpg?{somerandomnumber}" 

Больше информации

Контроль HTML-кеша

или же

теги для отключения кеширования во всех браузерах Полезные метатеги HTML

<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 ##