Wyłącz pamięć podręczną dla niektórych obrazów

Strategie buforowania przeglądarki mogą być kontrolowane przez nagłówki HTTP. Pamiętaj, że to tylko podpowiedź. Ponieważ przeglądarki są strasznie niespójne w tym (i w każdym innym) polu, potrzebujesz kilku nagłówków, aby uzyskać pożądany efekt w wielu przeglądarkach.

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

Jeśli chcesz to zrobić dynamicznie w przeglądarce przy użyciu javascript, oto przykład...

<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>

Rozwiązanie 1 nie jest świetne. to działa, ale dodawanie hacky losowych lub oznaczonych czasem ciągów zapytań na końcu plików graficznych nie jest skalowalne i sprawi, że przeglądarka ponownie pobiera i buforuje każdą wersję każdego wysłanego obrazu.

Rozwiązanie 2 jest bezużyteczne. Dodawanie nagłówków nocache do pliku obrazu jest nie tylko bardzo trudne do zaimplementowania, ale jest całkowicie niepraktyczne, ponieważ wymaga przewidzenia, kiedy będzie to potrzebne z wyprzedzeniem, za pierwszym razem załaduj dowolny obraz, który myślisz może zmiany w pewnym momencie w przyszłości.

Wprowadź Etags...

Absolute best way I ' ve found to solve this is to use ETAGS wewnątrz a .plik htaccess w katalogu images. Poniższy komunikat mówi Apache, aby wysłać unikalny hash do przeglądarki w nagłówkach plików obrazów. Ten hash zmienia się tylko wtedy, gdy plik obrazu jest modyfikowany, a ta zmiana powoduje, że przeglądarka ponownie wczytuje obraz następnym razem o to poprosi.

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

Sprawdziłam wszystkie odpowiedzi i najlepsza wydawała się być (która nie jest):

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

Jeśli jednak dodasz parametr cache = none (który jest statycznym słowem "none"), to nic nie wpłynie, przeglądarka nadal ładuje się z pamięci podręcznej.

Rozwiązaniem tego problemu było:

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

Gdzie zasadniczo dodać Unix timestamp, aby parametr dynamiczny i bez pamięci podręcznej, to działa.

Jednak mój problem był trochę inny: Ładowałem w locie wygenerowany obraz wykresu php i kontrolowanie strony za pomocą parametrów $_GET. Chciałem, aby obraz był odczytywany z pamięci podręcznej, gdy parametr GET URL pozostaje taki sam i nie buforuje się, gdy parametry GET ulegną zmianie.

Aby rozwiązać ten problem, musiałem hashować $_GET, ale ponieważ jest to tablica, oto rozwiązanie:

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

Edit :

Chociaż powyższe rozwiązanie działa dobrze, czasami chcesz podawać buforowaną wersję, dopóki plik nie zostanie zmieniony. (z powyższymi rozwiązanie, całkowicie wyłącza pamięć podręczną dla tego obrazu) Tak więc, aby obsługiwać buforowany obraz z przeglądarki, dopóki nie nastąpi zmiana w pliku obrazu, użyj:

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

Filemtime() pobiera czas modyfikacji pliku.

Wiem, że ten temat jest stary, ale bardzo dobrze wpisuje się w Google. Dowiedziałem się, że umieszczenie tego w nagłówku działa dobrze;

<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">

Zmiana źródła obrazu jest rozwiązaniem. Możesz to zrobić, dodając do obrazu znacznik czasu lub liczbę losową.

Lepiej byłoby dodać sumę kontrolną np. danych, które reprezentuje obraz. Umożliwia to buforowanie, gdy jest to możliwe.

Właśnie szukałem na to rozwiązania, a powyższe odpowiedzi nie działały w moim przypadku (i nie mam wystarczającej reputacji, aby je komentować). Okazuje się, że przynajmniej dla mojego przypadku użycia i przeglądarki, której używałem (Chrome na OSX), jedyną rzeczą, która zdawała się zapobiegać buforowaniu, było: {]}

Cache-Control = 'no-store'

Dla kompletności używam teraz wszystkich 3 z "no-cache, no-store, must-revalidate"

Więc w moim przypadku (serwowanie dynamicznie generowanych obrazów z Flask w Pythonie), musiałem zrobić po mam nadzieję, że działa w jak największej liczbie przeglądarek...

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

Dodajmy jeszcze jedno rozwiązanie do grupy.

Dodanie unikalnego ciągu na końcu jest idealnym rozwiązaniem.

example.jpg?646413154

Następujące rozwiązanie rozszerza tę metodę i zapewnia zarówno możliwość buforowania, jak i pobieranie nowej wersji po zaktualizowaniu obrazu.

Gdy obraz jest aktualizowany, filemtime zostanie zmieniony.

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

Teraz wyświetl obrazek:

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

Miałem taki problem i pokonałem go w ten sposób.

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

Użyłem tego do rozwiązania mojego podobnego problemu ... wyświetlanie licznika obrazów (od zewnętrznego dostawcy). Nie odświeżał się zawsze poprawnie. A po dodaniu losowego parametru wszystko działa dobrze:) [4]}

Dodałem ciąg daty, aby zapewnić odświeżanie co najmniej co minutę.

Przykładowy kod (PHP):

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

To daje src link w stylu:

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

Jeśli masz zakodowany na twardo adres URL obrazu, na przykład: http://example.com/image.jpg możesz użyć php, aby dodać nagłówki do obrazu.

Najpierw musisz sprawić, by apache przetwarzał Twój jpg jako php. Zobacz tutaj: czy możliwe jest uruchomienie PHP z plikiem rozszerzenia.php.jpg?

Załaduj obrazek (imagecreatefromjpeg) z pliku, a następnie dodaj nagłówki z poprzednich odpowiedzi. Użyj nagłówka funkcji php, aby dodać nagłówki.

Następnie Wyświetl obraz za pomocą imagejpeg funkcja.

Proszę zauważyć, że bardzo niebezpieczne jest pozwolić php przetwarzać obrazy jpg. Należy również pamiętać, że nie testowałem tego rozwiązania, więc od Ciebie zależy, czy zadziała.

Proste, Wyślij jedną lokalizację nagłówka.

Moja strona, zawiera jeden obrazek, a po załadowaniu obrazka nie ma zmian, następnie dodaję ten kod:

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