Wie kann ich Bilder von einer URL dynamisch anzeigen und Browser-Caching vermeiden?

Dynamische Bilder mit zwischengespeicherter URL anzeigen

Stellen Sie sich ein Szenario vor, in dem Sie ein Bild von einer bestimmten URL abrufen und dabei sicherstellen, dass jeder Zugriff ein eindeutiges Ergebnis liefert Bild. Wenn Sie jedoch versuchen, das Bild auf der Seite zu aktualisieren, bleibt das Bild unverändert, es sei denn, die Seite wird neu geladen.

JavaScript-Code für die Bildanzeige

Der folgende JavaScript-Code veranschaulicht Der Bildanzeige- und Aktualisierungsmechanismus:

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";

function updateImage() {
  if (newImage.complete) {
    document.getElementById("theText").src = newImage.src;
    newImage = new Image();
    newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
  }

  setTimeout(updateImage, 1000);
}

Im gegebenen Szenario wird das Bild nicht aktualisiert, da der Browser das Bild möglicherweise an der angegebenen Stelle zwischenspeichert URL. Dies kann verhindern, dass der Browser die neueste Bildversion abruft.

Überwindung des Cache-Problems

Um eine Aktualisierung des Bildes zu erzwingen, kann der URL ein angehängt werden Cachebreaker. Dadurch wird sichergestellt, dass der Browser das Bild direkt vom Server abruft, anstatt sich auf die zwischengespeicherte Version zu verlassen. Der geänderte Code würde Folgendes enthalten:

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

Dieser Zusatz stellt sicher, dass der aktuelle Zeitstempel bei jeder Erstellung eines Bildes an die URL angehängt wird. Infolgedessen ruft der Browser das Bild vom Server ab, anstatt auf die zwischengespeicherte Version zuzugreifen. Durch das Hinzufügen dieses Cachebreakers wird das Bild auf der Seite dynamisch aktualisiert und spiegelt die neueste vom Server bereitgestellte Version wider.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder von einer URL dynamisch anzeigen und Browser-Caching vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!