Warum wird mein dynamisch geladenes Bild nicht aktualisiert, ohne dass die Seite neu geladen werden muss?

Fehlerbehebung: Bild wird nicht dynamisch aktualisiert

Wenn Sie auf einen Link zugreifen, der bei jeder Anforderung ein neues Bild bereitstellt, kann es zu einem Problem kommen, bei dem ein Bild geladen wird Der Hintergrund wird auf der Seite nicht aktualisiert, es sei denn, Sie laden die Seite neu.

Der folgende Code veranschaulicht das Problem:

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

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

    setTimeout(updateImage, 1000);
}

In diesem Szenario wird das Bild auf der Seite nicht aktualisiert, obwohl die Anforderungsheader darauf hinweisen, dass das Caching deaktiviert ist:

HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache

Lösung: Cachebreaker

Um eine Aktualisierung des Bildes zu erzwingen, fügen Sie am Ende des Bildes einen Cachebreaker hinzu URL:

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

Durch das Anhängen des aktuellen Zeitstempels stellen Sie sicher, dass der Browser das Bild vom Server abruft, anstatt die zwischengespeicherte Version zu verwenden. Mit dieser Technik kann das Bild wie erwartet dynamisch auf der Seite aktualisiert werden.

Das obige ist der detaillierte Inhalt vonWarum wird mein dynamisch geladenes Bild nicht aktualisiert, ohne dass die Seite neu geladen werden muss?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!