Изображения таблиц стилей не перезагружаются Firefox или Safari - PullRequest
Новая
       29

Изображения таблиц стилей не перезагружаются Firefox или Safari

5 голосов
/ 14 октября 2008

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

Наш файл 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.

Итак, есть ли способ заставить Firefox автоматически обновить изображение, на которое ссылается файл CSS? Неужели я не единственный с этой проблемой?

EDIT2: я проверил это с помощью localhost, и ответ изображения не содержит никакой информации о кешировании, это: 

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 или большинство браузеров просто предполагают, что изображение меняется не очень часто (истекает заголовок и все).

Ответы [ 7 ]

8 голосов
/ 14 октября 2008

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

div#news {
  background: url(images/newsitem_background.jpg?v=00001) no-repeat;
  ...
}
2 голосов
/ 14 октября 2008

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

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

1 голос
/ 14 октября 2008

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

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

0 голосов
/ 25 августа 2009

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

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

0 голосов
/ 14 октября 2008

Это не решит проблему того, что 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);

Я использую его на своем домашнем сервере, чтобы случайным образом вернуть фоновое изображение для некоторых из моих страниц, и Firefox, похоже, не кеширует их. Вы также можете сделать несколько забавных штук с изображениями, если хотите.

0 голосов
/ 14 октября 2008

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

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

0 голосов
/ 14 октября 2008

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

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

...