У меня есть список элементов, который также содержит миниатюру изображения. Иногда мне нужно изменить уменьшенное изображение, но сохраняйте имя файла одинаково. Есть ли способ заставить браузер загружать недавно загруженное изображение, а не захватывать его из кеша браузера?
Это очень актуально, когда люди обновляют свои аватары, что вызывает недоумение для некоторых пользователей, которые продолжают видеть свой старый аватар, пока не очистят кеш браузера или не перезагрузите браузер.
Добавить уникальный номер в конец изображения src
т.е.
<?php echo "<img src=../thumbnail.jpg?" . time() . ">"; делать это только в форме для обновления аватара
работает на меня
btw, это хорошо работает для принудительного обновления других статических файлов
т.е. html для css-файлов
<link rel="Stylesheet" href="../css/cssfile.css?<?= md5_file('cssfile.css'); ?>" />
Вы можете использовать время модификации файла:
<? $filename = 'avatar.jpg'; $filemtime = filemtime($filename); echo "<img src='".$filename."?".$filemtime."'>"; //result: <img src='avatar.jpg?1269538749'> ?>
когда файл будет изменен, будет очищен кеш клиента
Вы можете аннулировать кеш для всей страницы, изменив заголовки :
<?php header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past ?>
При отправке изображения не отправляйте заголовок Expires . Также рассмотрите отправку этого заголовка кэша:
Cache-Control: must-revalidate
Это заставит браузер запрашивать ваш сервер для изображения каждый раз. Следите за заголовком If-Modified-Since в запросе; если изображение не изменено, ответьте 304 HTTP-кодом.
Вся эта процедура (необходимо-revalidate, If-Modified-Since, 304 answer) позволит браузеру кэшировать содержимое изображения, но в то же время спросить ваш сервер, изменился ли файл.
Другое, может быть, более простое решение – установить заголовок Expires на короткое время в будущем , например десять минут, и сообщить пользователю о десятиминутной задержке. Это ускорит загрузку большинства загрузок, так как нет необходимости делать HTTP-запрос для изображения вообще.
Кэшированные изображения также недействительны при обновлении страницы вручную (нажатие F5 в браузере). Это можно моделировать с помощью метода javascript location.reload (), который запускается при загрузке тела. Чтобы избежать постоянной перезагрузки, это может иметь место только один раз. Когда пользователь загружает новый аватар, запрос ReloadPending постоянно устанавливается в его / ее сеансе, и он сбрасывается, когда на него был дан ответ.
<?php if ($session['ReloadPending']) { $session['ReloadPending']=false; echo "<body onload='location.reload(true);'>"; } else echo "<body>"; ?>
Перезагрузка всей страницы после загрузки аватара вызовет мерцание страницы, но это происходит только один раз, что, я считаю, приемлемо.
Я узнал, что одним из лучших способов сделать это является наличие того же URL-адреса для получения и публикации изображения (REST).
POST / my / image (Cache-control: no-cache, must-revalidate)
GET / my / image (Cache-control: must-revalidate)