Heim >Web-Frontend >js-Tutorial >Wie aktualisiere ich ein Bild von derselben URL dynamisch ohne Browser-Caching?
So aktualisieren Sie ein Bild unter derselben URL dynamisch
Sie haben ein Problem, bei dem auf ein Bild auf Ihrer Website über einen Link zugegriffen und dieses aktualisiert wird mit einem neuen Bild bei jedem Aufruf des Links. Wenn Sie jedoch das Bild im Hintergrund laden und versuchen, es auf der Seite zu aktualisieren, bleibt es unverändert, auch wenn es beim erneuten Laden der Seite aktualisiert wird.
Das Problem liegt im Browser-Caching. Standardmäßig speichern Browser Bilder zwischen, um die Ladezeiten zu verbessern. Wenn Sie also versuchen, das Bild zu aktualisieren, zeigt der Browser einfach die zwischengespeicherte Version an, anstatt das neue Bild abzurufen.
Lösung: Cachebreaker verwenden
Um den Browser zu erzwingen Um das neueste Bild herunterzuladen, können Sie der Bild-URL einen Cachebreaker hinzufügen. Dies geschieht in der Regel durch Anhängen des aktuellen Zeitstempels, um sicherzustellen, dass der Browser die Anfrage als eindeutige URL erkennt.
In Ihrem JavaScript-Code:
newImage.src = "http://localhost/image.jpg?" + new Date().getTime();
Durch das Hinzufügen dieses Cachebreakers erzwingen Sie den Browser um das Bild direkt vom Server abzurufen und so den Cache effektiv zu umgehen. Dadurch wird sichergestellt, dass immer die neueste Version des Bildes auf der Seite angezeigt wird.
Das obige ist der detaillierte Inhalt vonWie aktualisiere ich ein Bild von derselben URL dynamisch ohne Browser-Caching?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!