Листы стилей не перезагружаются Firefox или Safari

Question

Мы обнаружили, что Firefox (по крайней мере v3) и Safari не кэшируют изображения, указанные в файле css. Изображения кэшируются, но они никогда не обновляются, даже если вы меняете их на сервере. Как только Firefox будет иметь изображение в кеше, он никогда не проверяет, изменилось ли оно.

Наш файл CSS выглядит следующим образом:

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

Проблема заключается в том, что если мы теперь изменить newsitem_background.jpg изображение, все пользователи Firefox все равно получит старое изображение, если они явно не обновите страницу. IE, с другой стороны, обнаруживает, что изображение изменилось и перезагрузило его автоматически.

Это известная проблема? Любые обходные пути? Благодаря!

EDIT: Решение не нажимать F5. Я могу сделать это. Но наши клиенты просто заходят на наш веб-сайт и получат старую устаревшую графику. Как они узнают, что им нужно будет нажать F5?

Я установил Firebug и подтвердил то, что я уже подозревал: Firefox просто даже не пытается получить изображения, на которые ссылается файл css, чтобы узнать, были ли они изменены. Когда вы нажимаете F5, он проверяет все изображения, и веб-сервер прекрасно реагирует на 304, за исключением тех, что изменили, где он отвечает на 200 OK.

Итак, есть ли способ заставить Firefox автоматически обновить изображение, на которое ссылается файл 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: Я сделал немного больше читать, и, похоже, он просто может» t, поскольку Firefox или большинство браузеров просто предполагают, что изображение не меняется очень часто (заканчивается заголовок и все).

Answer 1

Я бы просто добавил значение запроса к url ​​изображения. Я обычно просто создать «номер версии» и увеличить его каждый раз, когда изменения изображения:

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

Answer 2

Попробуйте удерживать клавишу SHIFT при повторном нажатии (или нажмите F5).

В противном случае используйте инструмент Firebug, чтобы проверить заголовки HTTP-запроса/ответа и наблюдать за значениями заголовка, которые контролируют кеширование. Я никогда не замечал этой проблемы. Возможно, ваш сервер возвращает ответ 304 (не изменен).

Answer 3

Я знаю, что это, вероятно, не то, что вы хотите услышать, но гораздо более вероятно, что Firefox следует стандарту, а IE делает что-то немного странное (и вы просто полагаетесь на него;)).

Поведение кэширования зависит от того, какие кеширующие заголовки отправляются вместе с вашими изображениями. Если вы можете разместить заголовки (или URL-адрес одного из изображений), тогда мы сможем более подробно рассказать о том, что происходит.

Answer 4

Проверьте свои HTTP-заголовки на изображениях, которые вы обслуживаете, а также файлы (-е) CSS.

Если какой-либо из них установлен в кеш (или отсутствует), вы обнаружите, что браузер правильно кэширует файлы.

Answer 5

Чтобы избежать такой проблемы, я видел, как веб-мастера добавили номер версии в свои файлы. Поэтому они загружают сайт-look-124.css и newsitem_background-7.jpg.

Неплохое решение, ИМХО.

Answer 6

Это не решит проблему Firefox не проверяет, если изображение истек, но то, что вы можете сделать, чтобы убедиться, что ваши клиенты видят правильное изображение:

Установите изображение в CSS на PHP или похожий скрипт, который возвращает изображение:

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, похоже, не кэширует их. Вы также можете сделать фанки ступ с изображениями, если хотите.

Answer 7

Еще одна быстрая работа вокруг (если это в основном происходит в середине веб-разработки), чтобы просмотреть фактические страницы CSS в firefox и перезагрузите страницу, а затем, когда вы вернетесь на сайт, браузер прочитает текущую страницу css.

, конечно, это ТЕмп исправление только для веб-дизайнера