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

StackOverflow https://stackoverflow.com/questions/200470

  •  03-07-2019
  •  | 
  •  

Вопрос

Мы обнаружили, что 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 ОК.

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

РЕДАКТИРОВАТЬ2:Я тестировал это с помощью 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

РЕДАКТИРОВАТЬ3:Я еще немного прочитал, и похоже, что это просто невозможно исправить, поскольку Firefox или большинство браузеров просто предполагают, что изображение не меняется очень часто (заголовок истекает и все такое).

Это было полезно?

Решение

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

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

Другие советы

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

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

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

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top