Отключить кэш для некоторых изображений



Я создаю некоторые изображения с помощью PHP lib.



иногда браузер не загружает созданный файл.



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



Примечание: я должен использовать то же имя для созданных изображений с течением времени.

679   13  

13 ответов:

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

Так, например,

<img src="image.png" />

станет

<img src="image.png?dummy=8484744" />

или

<img src="image.png?dummy=371662" />

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

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

вам нужно будет проверить, может ли ваш веб-сервер справиться с этим трюком.

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

    header("Pragma-directive: no-cache");
    header("Cache-directive: no-cache");
    header("Cache-control: no-cache");
    header("Pragma: no-cache");
    header("Expires: 0");

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

<img id=graph alt="" 
  src="http://www.kitco.com/images/live/gold.gif" 
  />

<script language="javascript" type="text/javascript">
    var d = new Date(); 
    document.getElementById("graph").src = 
      "http://www.kitco.com/images/live/gold.gif?ver=" + 
       d.getTime();
</script>

Решение 1 не большой. это действительно работает, но добавление hacky случайных или помеченных временем строк запроса в конец ваших файлов изображений не масштабируется и заставит браузер повторно загружать и кэшировать каждую версию каждого изображения, которое вы отправляете.

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

Введите Etags...

The абсолютный лучший способ Я нашел, чтобы решить эту проблему, чтобы использовать ETAGS внутри a .htaccess файл в каталоге изображений. Ниже говорится, что Apache отправляет уникальный хэш в браузер в заголовках файлов изображений. Этот хэш только когда-либо меняется, когда время изображения файл изменяется, и это изменение запускает браузер для перезагрузки изображения при следующем запросе.

<FilesMatch "\.(jpg|jpeg)$">
FileETag MTime Size
</FilesMatch>

Я проверил все ответы, и лучший из них, казалось, был (что не так):

<img src="image.png?cache=none">

в первую очередь.

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

решение этой проблемы было:

<img src="image.png?nocache=<?php echo time(); ?>">

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

однако, моя проблема была немного отличается: Я загружал на лету сгенерированное php изображение диаграммы и контролировал страницу с параметрами $_GET. Я хотел, чтобы изображение считывалось из кэша, когда параметр url GET остается неизменным, и не кэшируется при изменении параметров GET.

чтобы решить эту проблему, мне нужно было хэшировать $_GET, но поскольку это массив, вот решение:

$chart_hash = md5(implode('-', $_GET));
echo "<img src='/images/mychart.png?hash=$chart_hash'>";

Edit:

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

echo "<img src='/images/mychart.png?hash=" . filemtime('mychart.png') . "'>";

filemtime () получает время изменения файла.

Я знаю, что эта тема старая, но она очень хорошо работает в Google. Я узнал, что положить это в заголовок работает хорошо;

<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">

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

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

Я просто искал решение для этого, и ответы выше не работали в моем случае (и у меня недостаточно репутации, чтобы комментировать их). Оказывается, по крайней мере для моего прецедента и браузера, который я использовал (Chrome на OSX), единственное, что, казалось, мешало кэшированию, было:

Cache-Control = 'no-store'

для полноты я теперь использую все 3 'no-cache, no-store, must-revalidate'

Так что в моем случае (обслуживание динамически генерируемых изображений из колбы в Python), я пришлось сделать следующее, Мы надеемся работать в как можно большем количестве браузеров...

def make_uncached_response(inFile):
    response = make_response(inFile)
    response.headers['Pragma-Directive'] = 'no-cache'
    response.headers['Cache-Directive'] = 'no-cache'
    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response.headers['Pragma'] = 'no-cache'
    response.headers['Expires'] = '0'
    return response

давайте добавим еще одно решение для связки.

добавление уникальной строки в конце является идеальным решением.

example.jpg?646413154

следующее решение расширяет этот метод и обеспечивает как возможность кэширования, так и получение новой версии при обновлении образа.

когда изображение обновляется,filemtime будет изменен.

<?php
$filename = "path/to/images/example.jpg";
$filemtime = filemtime($filename);
?>

теперь выведите изображение:

<img src="images/example.jpg?<?php echo $filemtime; ?>" >

У меня была эта проблема и преодоление вот так.

var newtags='<div class="addedimage"><h5>preview image</h5><img src="'+one+'?nocache='+Math.floor(Math.random() * 1000)+'"></div>';

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

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

пример кода (PHP):

$output .= "<img src=\"http://xy.somecounter.com/?id=1234567890&".date(ymdHi)."\" alt=\"somecounter.com\" style=\"border:none;\">";

в результате src ссылка типа:

http://xy.somecounter.com/?id=1234567890&1207241014

Если у вас есть жестко закодированный URL изображения, например:http://example.com/image.jpg Вы можете использовать php для добавления заголовков к изображению.

сначала вам нужно будет заставить apache обрабатывать ваш jpg как php. Видеть здесь: можно ли выполнить PHP с расширением файла.РНР.в JPG?

загрузите изображение (imagecreatefromjpeg) из файла, затем добавьте заголовки из предыдущих ответов. Используйте заголовок функции php для добавления заголовков.

затем выведите изображения с функцией imagejpeg.

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

просто, отправьте одно расположение заголовка.

мой сайт, содержит одно изображение, и после загрузки изображения, не изменится, то я добавляю этот код:

<?php header("Location: pagelocalimage.php"); ?>

Работа для меня.

Comments

    Ничего не найдено.