Как очистить или заменить кэшированное изображение

Я знаю, что существует множество способов предотвратить кэширование изображений (например, с помощью меток META), а также несколько приятных трюков, чтобы показать текущую версию изображения при каждой загрузке страницы (например, image.jpg? x = timestamp), но есть ли способ очистить или заменить изображение в кеше браузеров, чтобы ни один из вышеперечисленных методов не был необходим?

В качестве примера скажем, что на странице 100 изображений и что эти изображения называются "01.jpg", "02.jpg", "03.jpg" и т.д. Если изображение "42.jpg" заменен ли, есть ли способ заменить его в кеше, чтобы "42.jpg" автоматически отображал новое изображение при последовательных загрузках страниц? Я не могу использовать метод меток META, потому что мне нужно постоянно использовать замену ISN "T" на кеширование, и я не могу использовать метод timestamp, потому что я не хочу, чтобы ВСЕ изображения загружались каждый раз, когда страница грузы.

Я разбил свой мозг и просмотрел Интернет, чтобы сделать это (желательно через javascript), но не повезло. Любые предложения?

Ответ 1

Если вы пишете страницу динамически, вы можете добавить последнюю временную метку к URL-адресу:

<img src="image.jpg?lastmod=12345678" ...

Ответ 2

<meta> абсолютно не имеет значения. Фактически, вы не должны пытаться использовать его для управления кешем вообще (к тому времени, когда все прочитает содержимое документа, оно уже кэшировано).

В HTTP каждый URL-адрес независим. Что бы вы ни делали с HTML-документом, оно не будет применяться к изображениям.

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

Если ваше изображение меняется очень часто (каждые несколько минут или даже по каждому запросу), отправьте Cache-control: no-cache или Cache-control: max-age= xx, где xx - это количество секунд, в течение которого изображение будет "свежим".

Случайный URL-адрес для короткоживущих файлов - плохая идея. Он загрязняет кеши бесполезными файлами и заставляет полезные файлы очищаться раньше.

Если у вас есть Apache и mod_headers или mod_expires, тогда создайте файл .htaccess с соответствующими правилами.

<Files ~ "-nocache\.jpg">
   Header set Cache-control "no-cache"
</Files>

Выше будет делать файлы *-nocache.jpg не кэшируемыми.

Вы также можете обслуживать изображения через PHP script (по умолчанию они имеют ужасную возможность кэширования;)

Ответ 3

Добавьте URL-адрес изображения

"image1.jpg?" + DateTime.Now.ToString( "ddMMyyyyhmmsstt" );

Просто добавьте случайную строку в querystring

Спасибо

Раджу Джетла

Ответ 4

В отличие от некоторых других ответов, существует способ для javascript на стороне клиента для замены кэшированного изображения. Фокус в том, чтобы создать скрытый <iframe>, установить его атрибут src на URL-адрес изображения, дождаться его загрузки, а затем принудительно перезагрузить его, вызвав location.reload(true). Это обновит кешированную копию изображения. Затем вы можете заменить элементы <img> на своей странице (или перезагрузить страницу), чтобы просмотреть обновленную версию изображения.

(Небольшое предостережение: при обновлении отдельных элементов <img>, а если есть более одного с обновленным изображением, вам нужно очистить или удалить ВСЕ, а затем заменить или reset их. вы делаете это один за другим, некоторые браузеры будут копировать версию образа в памяти из других тегов, и в результате вы можете не увидеть обновленное изображение, несмотря на то, что оно находится в кеше).

Я разместил код для такого обновления здесь.

Ответ 5

Я уверен, что большинство браузеров уважают Last-Modified HTTP-заголовок. Отправляйте их и запрашивайте новое изображение. Он будет кэшироваться браузером, если строка Last-Modified не изменилась.

Ответ 6

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

<script>
var num = Math.random();
var imgSrc= "image.png?v="+num;
$(function() {
$('#imgID').attr("src", imgSrc);
})
</script>

Ответ 7

Причина использования трюка? x = timestamp заключается в том, что это единственный способ сделать это на основе изображения. Это или динамически генерировать имена изображений и указывать на приложение, которое выводит изображение.

Я предлагаю вам выяснить, на стороне сервера, если изображение было изменено/обновлено, и если это так, то выведите свой тег с трюком? x = timestamp, чтобы заставить новое изображение.

Ответ 8

См. http://en.wikipedia.org/wiki/URI_scheme

Обратите внимание, что вы можете предоставить уникальное имя пользователя: пароль @комбо в качестве префикса для части домена uri. В моих экспериментах я обнаружил, что включение этого с поддельным идентификатором (или паролем, который я предполагаю) приводит к тому, что обращение с ресурсом является уникальным - таким образом, разбивая кэширование по своему усмотрению.

Просто используйте временную метку в качестве имени пользователя, и насколько я могу сказать, сервер игнорирует эту часть uri, пока аутентификация не включена.

Btw - Я также не мог использовать трюки выше с проблемой кэширования значка маркера google-карты, с которой работал трюк? param = timestamp, но вызвал проблемы с исчезающими оверлеями. Никогда не мог понять, почему это происходит, но пока так хорошо, используя этот метод. Я не уверен в том, что если передача поддельных учетных данных будет иметь негативные последствия для сервера, это скажется на производительности. Если кто-нибудь знает, мне было бы интересно узнать, поскольку я еще не в большом объеме производства.

Сообщите свои результаты.

Ответ 9

Измените ETAG для изображения.

Ответ 10

В случае повторной загрузки изображения есть ли способ очистить или ЗАМЕНИТЬ клиентскую клиентскую копию ранее кэшированного изображения? В моем примере выше, цель состоит в том, чтобы заставить браузер забыть, что "42.jpg"

Вы используете firefox правильно?

Найдите меню Tools
Выберите Clear Private Data
Отключить все флажки, кроме проверки Cache
Нажмите OK

: -)

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

Я НЕ МОГУ использовать метод META tag или метод метки времени, потому что я хочу, чтобы все изображения были кэшированы при нормальных обстоятельствах.

Почему вы не можете использовать временную метку (или etag, которая равна одному и тому же)? Помните, что вы должны использовать временную метку самого файла изображения, а не только Time.Now.
Я ненавижу быть носителем плохих новостей, но у вас нет других вариантов.

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

Ответ 11

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

Следовательно, вы должны рассматривать каждый файл и каждый URL как ценный ресурс, который следует тщательно контролировать.

Таким образом, предложение porneL для версий файлов изображений кажется лучшим долгосрочным ответом. ETAG используется при нормальных обстоятельствах, но, может быть, ваши усилия аннулируют его? Попробуйте изменить ETAG, как было предложено.

Ответ 12

При изменении имени файла изображения не является параметром, затем используйте переменную сеанса на стороне сервера и функцию javascript window.location.reload(). Как показано ниже:

После завершения загрузки:

Session("reload") = "yes"

На странице_load:

If Session("reload") = "yes" Then
    Session("reload") = Nothing
    ClientScript.RegisterStartupScript(Me.GetType), "ReloadImages", "window.location.reload();", True)
End If

Это позволяет браузеру клиента обновляться только один раз, поскольку переменная сеанса reset после одного события.

Надеюсь, что это поможет.

Ответ 13

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

Ответ 14

попробуйте ниже решения,

myImg.src= " http://localhost/image.jpg?" + new Date(). getTime();

Выше решения работают для меня:)

Ответ 15

Попробуйте этот фрагмент кода:

var url = imgUrl? + Math.random();

Это гарантирует, что каждый запрос будет уникальным, поэтому вы всегда будете получать последнее изображение.

Ответ 16

Я обычно делаю то же, что сказал нам @Greg, и у меня есть функция для этого:

function addMagicRefresh(url)
{
    var symbol = url.indexOf('?') == -1 ? '?' : '&';
    var magic = Math.random()*999999;
    return url + symbol + 'magic=' + magic;
}

Это будет работать, так как ваш сервер принимает его, и вы не используете параметр "magic" любым другим способом.

Надеюсь, это поможет.

Ответ 17

Я пробовал что-то смехотворно просто:

Перейдите в папку FTP на веб-сайте и переименуйте папку IMG в IMG2. Обновите свой сайт, и вы увидите, что изображения будут отсутствовать. Затем переименуйте папку IMG2 обратно в IMG, и это было сделано, по крайней мере, это сработало для меня в Safari.