it-swarm.com.de

so löschen oder ersetzen Sie ein zwischengespeichertes Bild

Ich weiß, dass es viele Möglichkeiten gibt, das Zwischenspeichern von Bildern (z. B. über META-Tags) zu verhindern, und ein paar schöne Tricks, um sicherzustellen, dass die aktuelle Version eines Bildes bei jedem Laden der Seite angezeigt wird (z. B. image.jpg? X = Zeitstempel) ), aber gibt es eine Möglichkeit, ein Bild im Browser-Cache tatsächlich zu löschen oder zu ersetzen, sodass keine der oben genannten Methoden erforderlich ist?

Nehmen wir als Beispiel an, es gibt 100 Bilder auf einer Seite und diese Bilder heißen "01.jpg", "02.jpg", "03.jpg" usw. Wenn das Bild "42.jpg" ersetzt wird, wird gibt es eine Möglichkeit, es im Cache zu ersetzen, so dass "42.jpg" das neue Bild beim nachfolgenden Laden der Seite automatisch anzeigt? Ich kann die META-Tag-Methode nicht verwenden, da ich immer etwas ersetzen muss, das ISN "T ersetzt hat, um zwischengespeichert zu bleiben. Ich kann die Zeitstempel-Methode nicht verwenden, da ich nicht möchte, dass ALLE Bilder jedes Mal neu geladen werden, wenn die Seite geladen wird Ladungen.

Ich habe mir den Kopf zerbrochen und im Internet nach Möglichkeiten gesucht (vorzugsweise via Javascript), aber kein Glück. Irgendwelche Vorschläge?

31
tallvanilla

Wenn Sie die Seite dynamisch schreiben, können Sie der URL den zuletzt geänderten Zeitstempel hinzufügen:

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

48
Greg

<meta> ist absolut irrelevant. Tatsächlich sollten Sie nicht versuchen, den Cache überhaupt zu steuern (wenn etwas den Inhalt des Dokuments liest, ist es bereits zwischengespeichert).

In HTTP ist jede URL unabhängig. Was auch immer Sie mit dem HTML-Dokument tun, es gilt nicht für Bilder.

Um die Zwischenspeicherung zu steuern, können Sie die URLs bei jeder Änderung ihres Inhalts ändern. Wenn Sie Bilder von Zeit zu Zeit aktualisieren, lassen Sie sie für immer zwischengespeichert werden und verwenden Sie einen neuen Dateinamen (mit einer Version, einem Hash oder einem Datum) für das neue Image. Dies ist die beste Lösung für langlebige Dateien.

Wenn sich Ihr Bild sehr häufig ändert (alle paar Minuten oder sogar bei jeder Anforderung), senden Sie Cache-control: no-cache oder Cache-control: max-age=xxwobei xx die Anzahl der Sekunden ist, die das Bild "frisch" ist.

Zufällige URL für kurzlebige Dateien ist keine gute Idee. Es verschmutzt Caches mit nutzlosen Dateien und erzwingt, dass nützliche Dateien früher gelöscht werden.

Wenn Sie über Apache und mod_headers oder mod_expires verfügen, erstellen Sie eine .htaccess-Datei mit den entsprechenden Regeln.

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

Oben werden *-nocache.jpg-Dateien nicht zwischengespeichert.

Sie können Bilder auch über das Skript PHP bereitstellen (standardmäßig sind sie schrecklich in der Zwischenspeicherung;).

11
Kornel

Fügen Sie die Bild-URL so hinzu 

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

Fügen Sie einfach eine zufällige Zeichenfolge in die Querzeichenfolge ein

Danke dir

Raju Jetla

11
Raju Jetla

Im Gegensatz zu dem, was einige andere Antworten gesagt haben, ist eine Möglichkeit für clientseitige Javascript, ein zwischengespeichertes Bild zu ersetzen. Der Trick besteht darin, einen versteckten <iframe> zu erstellen, das src-Attribut auf die Image-URL zu setzen, auf das Laden der URL zu warten und sie dann durch Aufruf von location.reload(true) zwangsweise neu zu laden. Dadurch wird die zwischengespeicherte Kopie des Bildes aktualisiert. Sie können dann die <img>-Elemente auf Ihrer Seite ersetzen (oder Ihre Seite neu laden), um die aktualisierte Version des Bildes anzuzeigen.

(Kleiner Vorbehalt: Wenn Sie einzelne <img>-Elemente aktualisieren, und wenn mehr als eines das aktualisierte Bild enthält, müssen Sie sie ALLE löschen oder entfernen und sie dann ersetzen oder zurücksetzen. Zum einen kopieren einige Browser die In-Memory-Version des Images von anderen Tags, und das Ergebnis ist, dass das aktualisierte Image möglicherweise nicht angezeigt wird, obwohl es sich im Cache befindet.

Ich habe etwas Code für diese Art von Update hier veröffentlicht.

8
Doin

Ich bin sicher, dass die meisten Browser den Last-Modified HTTP-Header berücksichtigen. Senden Sie diese aus und fordern Sie ein neues Bild an. Sie wird vom Browser zwischengespeichert, wenn sich die Zeile "Letzte Änderung" nicht ändert.

5
strager

Sie können dem Bild eine Zufallszahl hinzufügen, die einer neuen Version ähnelt. Ich habe die ähnliche Logik implementiert und sie funktioniert perfekt.

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

Der Grund für den Trick? X = timestamp ist, dass dies der einzige Weg ist, dies pro Bild zu tun. Das oder generiert dynamisch Bildnamen und zeigt auf eine Anwendung, die das Bild ausgibt.

Ich schlage vor, Sie suchen serverseitig, ob das Image geändert/aktualisiert wurde, und wenn ja, geben Sie Ihr Tag mit dem Zeitstempel-Trick? X = aus, um das neue Image zu erzwingen.

1
TravisO

Siehe http://en.wikipedia.org/wiki/URI_scheme

Beachten Sie, dass Sie einen eindeutigen Benutzernamen: password @ combo als Präfix für den Domänenteil des URI angeben können. In meinen Experimenten habe ich herausgefunden, dass die Einbeziehung dieser ID mit einer gefälschten ID (oder einem von mir angenommenen Kennwort) dazu führt, dass die Ressource als einzigartig betrachtet wird - und das Caching nach Belieben bricht.

Verwenden Sie einfach einen Zeitstempel als Benutzernamen, und soweit dies möglich ist, ignoriert der Server diesen Teil des URI, solange die Authentifizierung nicht aktiviert ist.

Übrigens: Ich konnte die oben genannten Tricks auch nicht mit einem Google Map Marker Icon-Caching-Problem verwenden, bei dem der Trick? Param = timestamp funktionierte, aber Probleme mit verschwindenden Überlagerungen verursachten. Ich konnte nie herausfinden, warum das so war, aber mit dieser Methode bisher so gut. Ich bin nicht sicher, ob die Weitergabe falscher Anmeldeinformationen nachteilige Auswirkungen auf die Serverleistung hat. Wenn jemand weiß, wäre ich interessiert zu wissen, da ich noch nicht in Massenproduktion bin.

Bitte melden Sie Ihre Ergebnisse zurück.

1
Inator

Nein, es gibt keine Möglichkeit, eine Datei in einem Browser-Cache zu löschen, weder vom Webserver noch von irgendetwas, das Sie in die gesendeten Dateien einfügen können. Der Browser-Cache gehört dem Browser und wird vom Benutzer gesteuert.

Daher sollten Sie jede Datei und jede URL als eine wertvolle Ressource behandeln, die sorgfältig verwaltet werden sollte.

Daher scheint der Vorschlag von porneL, die Bilddateien zu versionieren, die beste langfristige Antwort. Die ETAG wird unter normalen Umständen verwendet, aber Ihre Bemühungen haben sie möglicherweise zunichte gemacht? Ändern Sie die ETAG wie vorgeschlagen.

0
Rob Williams

Normalerweise mache ich dasselbe, wie @Greg es uns gesagt hat, und ich habe dafür eine Funktion:

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

Dies funktioniert, da Ihr Server dies akzeptiert und Sie den Parameter "magic" nicht auf andere Weise verwenden.

Ich hoffe, es hilft.

Ändern Sie die ETAG für das Bild.

0
StingyJack

versuchen Sie unter Lösungen,

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

Obige Lösungen funktionieren für mich :)

0

Wenn das Ändern des Dateinamens nicht möglich ist, verwenden Sie eine serverseitige Sitzungsvariable und eine JavaScript-Funktion window.location.reload(). Wie folgt:

Nach dem Hochladen abgeschlossen:

Session("reload") = "yes"

Bei page_load:

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

Dadurch kann der Client-Browser nur einmal aktualisiert werden, da die Sitzungsvariable nach einem Vorgang zurückgesetzt wird.

Hoffe das hilft.

0
Pete

Um den Cache für pictore zu ersetzen, können Sie serverseitig einen Versionswert speichern. Wenn Sie ein Bild laden, senden Sie diesen Wert stattdessen mit einem Zeitstempel. Wenn Ihr Bild geändert wird, ändern Sie seine Version.

0
ikryvorotenko

Gibt es für den Fall, dass ein Bild erneut hochgeladen wird, eine Möglichkeit, das zuvor zwischengespeicherte Bild clientseitig zu löschen oder zu ersetzen? In meinem obigen Beispiel soll der Browser vergessen lassen, was "42.jpg" ist

Du hast Firefox richtig?

  • Suchen Sie das Tools-Menü
  • Clear Private Data auswählen
  • Deaktivieren Sie alle Kontrollkästchen, mit der Ausnahme, dass Cache aktiviert ist
  • Drücke OK

:-)

Im Ernst, ich habe noch nie von so etwas gehört, und ich bezweifle, dass es eine API dafür gibt. Ich kann mir nicht vorstellen, dass es von Seiten der Browser-Entwickler eine gute Idee wäre, Sie in ihrem Cache herumstochern zu lassen, und es gibt keine Motivation, die ich für eine solche Funktion sehen kann.

Ich kann NICHT die META-Tag-Methode OR der Zeitstempel-Methode verwenden, da ich unter normalen Umständen alle Bilder im Cache speichern möchte.

Warum können Sie keinen Zeitstempel verwenden (oder etag, der sich auf dasselbe bezieht)? Denken Sie daran, dass Sie den Zeitstempel der Bilddatei selbst verwenden sollten, nicht nur Time.Now.
Ich hasse es, der Träger schlechter Nachrichten zu sein, aber Sie haben keine anderen Möglichkeiten.

Wenn sich die Bilder nicht ändern, wird auch der Zeitstempel nicht geändert, sodass alles "unter normalen Umständen" zwischengespeichert wird. Wenn sich die Bilder ändern, erhalten sie einen neuen Zeitstempel (den sie aus Gründen des Zwischenspeichers benötigen). Der Zeitstempel bleibt jedoch für immer gültig, bis das Bild erneut ersetzt wird.

0
Orion Edwards

Probieren Sie dieses Code-Snippet aus:

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

Dadurch wird sichergestellt, dass jede Anfrage eindeutig ist, sodass Sie immer das neueste Bild erhalten.

0
Akbar Badhusha