HTML/JavaScript: Wie Grafik neu laden?

[Der schöne Günther]

Ich habe einen simplen Indy-Http-Server der ein paar Status & Sensor-Werte anzeigt.

Ich habe jetzt eine Grafik hinzugefügt: Der Http-Server liefert das HTML wenn man ihn mit GET / aufruft und ein dynamisch generiertes PNG-Bild wenn er per http mit GET /IMG angesprochen wird. Auf meiner HTML-Seite packe ich nun ein <img src="/IMG" /> und sehe im Browser die Grafik. Tolle Sache :thumb:

Jetzt möchte ich den Benutzer nicht ständig F5 drücken lassen, sondern per JavaScript das Bild im Sekundentakt aktualisieren. Einen JavaScript-Timer bekomme ich hin, auch z.B. reine Textbausteine zu aktualisieren ist kein Problem.

Ich tue mich schwer mit dem <img>: Überall liest man, man solle die URL verändern in z.B. http://host/img.png?12345, die Zahl hinten immer weiter hochzählen und so den Browser-Cache "austricksen".

Das kann doch im Jahr 2022 keine erst gemeinte Lösung sein. Vor allem nicht, da ich hier ja auch den Server kontrolliere und in meinem Indy-Server auch Cache und alles einstellen kann.

Wie macht man es "richtig"?

[Olli73]

Schau mal hier

[v2afrank]

Funktioniert denn nicht so etwas ?
<img class="myImg" >
<src>
window.settimeout(function(){document.getElementBy Id('batteryID').src ="/IMG"; },1000);
</src>

[SebastianZ]

Zitat:

Zitat von Der schöne Günther (Beitrag 1500042)

...

Das kann doch im Jahr 2022 keine erst gemeinte Lösung sein. Vor allem nicht, da ich hier ja auch den Server kontrolliere und in meinem Indy-Server auch Cache und alles einstellen kann.

Wie macht man es "richtig"?

Der Browser-Cache ist auch im Jahr 2022 ein Ding, mit dem man umgehen muss ;)
Es gibt afaik grundsätzlich 2 Wege um das zu lösen:

1. Du deaktivierst den Browser-Cache (https://cristian.sulea.net/blog/disa...eta-html-tags/) und lädst die komplette Seite wieder neu.
2 (der hübschere Weg, da du nicht ständig alles laden musst): Du änderst via Javascript die SRC im Bild. Wenn das Bild die gleiche URL hat, muss du es über einen "Parameter" dazu bringen es wie neu aussehen zu lassen. Ansonsten würde sich für den Browser nichts ändern und er würde das Bild nicht neu laden. Am einfachsten finde ich persönlich, wenn man am Ende einfach Datum/Uhrzeit anfügt, dann muss man sich nicht ums hochzählen kümmern. (Ein Beispiel von vielen: https://instructobit.com/tutorial/11...ing-Javascript)

[Redeemer]

Zitat:

Zitat von Der schöne Günther (Beitrag 1500042)

Überall liest man, man solle die URL verändern in z.B. http://host/img.png?12345, die Zahl hinten immer weiter hochzählen und so den Browser-Cache "austricksen".

Ich denke, das ist wirklich das einzige, was geht, außer man kann auf dem Server die Cachelebenszeit der Grafik ändern und der Browser frag sie auch dann an, wenn man den src kurz auf leer oder so ändert.

[Der schöne Günther]

Vielen Dank für die Antworten.

Nein, ich weigere mich, an die URL irgendeinen Buchstabensalat dran zu hängen und darauf zu hoffen, dass der Browser das tut, was ich mir wünsche.

Ich habe in der Antwort vom Server den Cache nun auf

Delphi-Quellcode:

no-store, must-revalidate

gesetzt, und es tut was es soll.

Mein gesamtes JavaScript sieht so aus:

Code:

document.addEventListener(
   "DOMContentLoaded", 
   function(event) { 
      init();
   }
);

function init() {
   setInterval(
      function() {
         var imgSrc = String(document.getElementById("img").src);
         document.getElementById("img").src = imgSrc;
      },
      1000
   )
}

Der gesamte Teil vom Delphi-Server sieht so aus:

Delphi-Quellcode:

procedure TImageReplyGenerator.generateReply(
   const request: TIdHTTPRequestInfo;
   const response: TIdHTTPResponseInfo
);
begin
   response.ContentStream := getPngStream();
   try
      response.ContentType := 'image/png';
      response.FreeContentStream := False;
      response.CacheControl := 'no-store, must-revalidate'; // siehe https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
      response.Expires := Now();
      response.LastModified := Now();
   except
      response.ContentStream.Free();
      response.ContentStream := nil;
      raise;
   end;
end;

Der Internet Explorer tut mal wieder nicht was er soll, aber das ist dann auch egal 8-)