Javascript-форум - Обновить картинку в кэше

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Обновить картинку в кэше (https://javascript.ru/forum/misc/63506-obnovit-kartinku-v-kehshe.html)

Обновить картинку в кэше

Есть некая страница с картинкой. Картинка на сервере меняется. Браузер отображает старую картинку из кэша. Нужно заставить браузер отобразить новую картинку.

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

Ссылка должна остаться без изменений, ищу альтернативные варианты.

MrBean, если через добавление GET-переменных никак, то тогда через php-header можно принудительно отключить кэширование на многих прокси серверах и обозревателях сети, передав заголовки:

<?php
$fn = '/test/foo.png';
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Дата в прошлом
header('Content-Length: '.filesize($fn));
header('Content-Type: image/png');
print file_get_contents($fn);
?>

Можно и через AJAX, но заморочек будет НАМНОГО больше - не советую!

Судя по коду, вы предлагаете отдавать картинки php-скриптом. Такой вариант не подойдет. Нужны идей с условием, что картинки и страница отдаются статикой. Пробовал как-то обыграть идею с отключением кэширования в AJAX-запросе - ничего не вышло.

document.getElementById('myimg').src = 'image.jpg?' + Math.random();

Цитата:

Сообщение от MrBean (Сообщение 419105)

Судя по коду, вы предлагаете отдавать картинки php-скриптом. Такой вариант не подойдет. Нужны идей с условием, что картинки и страница отдаются статикой.

MrBean, тогда можно в файле на сервере ".htaccess", который надо загрузить в папку с картинками, указать принудительный забор картинки:

Код:

<FilesMatch ".(gif|jpg|jpeg|png|ico)$">

    Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"

    Header set Pragma "no-cache"

</FilesMatch>

Что почитать про кэширование через файл .htaccess:

Ок, спасибо, идея с отключением кэширования понятна. Мне вот что не дает покоя: если в момент, когда браузер показывает старую картинку из кэша, открыть файл картинки напрямую в соседнем окне, картинка в кэше благополучно обновляется. Неужели это нельзя как-то сымитировать на JS? Пробовал слать всякие AJAX-запросы прямо в картинку с разными заголовками - ничего не выходит.

Вот что я натестил на данный момент:

WebKit: если после обновления картинки на сервере послать любой AJAX-запрос в картинку, кэш картинки обновляется. То есть трюк работает.

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

Presto: открытием картинки в соседнем окне кэш обновляется. Сымитировать трюк программно не получается совсем. Трюк с AJAX-запросом работать не хочет.