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

Question

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

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

Я ломал голову и искал в интернете способ сделать это (желательно через javascript), но не повезло. Есть предложения?

Answer 1

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

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

Answer 2

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

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

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

Спасибо

Раджу Джетла

Answer 3

<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-скрипта (по умолчанию они имеют ужасную кешируемость;)

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

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

Кстати, я также не мог использовать описанные выше уловки с проблемой кеширования значков маркеров карты Google, которая у меня возникла, когда работал трюк с? Никогда не мог понять, почему это происходит, но пока все хорошо, используя этот метод. В чем я не уверен, так это в том, что передача фальшивых учетных данных будет иметь негативные последствия для производительности сервера. Если кто-нибудь знает, мне было бы интересно узнать, так как я еще не занят массовым производством.

Пожалуйста, сообщите ваши результаты.

Answer 8

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

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

Answer 9

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

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

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

Answer 10

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

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

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

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