Artikel-Hilfsmenü
Donnerstag, 23. Juni 2022 – aktualisiert am Donnerstag, 11. August 2022
Bild(er) aktualisieren ohne page reload
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Die Aufgabe: Ein (oder mehrere) Bild(er) regelmäßig aktualisieren, ohne die ganze Seite zu reloaden.
Quelle: www.terra-hd.de/chiemsee
Als Beispiel dient hier ein von einer Live-Webcam bereitgestelltes Foto, das alle 5 Minuten neu aufgenommen wird, wobei der Dateiname gleich bleibt.
Um sicherzustellen, dass auch wirklich das jeweils aktuellste Bild angezeigt wird, muss das Bild in regelmäßigen Abständen, z.B. alle 60 Sekunden neu vom Server geholt werden. Wenn ein refresh der ganzen Seite, aus welchen Gründen auch immer ¹), nicht in Frage kommt, wie kann man dann nur das Bild aktualisieren?
Erster Gedanke: AJAX. Nein, das funktioniert nicht. Aus mehreren Gründen.
Lösung mit JavaScript
<script>
window.onload=function () {
reimg0=document.getElementById('re0');
setInterval(function () {
if (reimg0) {
reimg0.src=reimg0.src.replace(/\jpg.*/,function () {
return 'jpg?'+new Date().getTime();
})
}
},60000)
}
</script>
Der img-Tag muss dazu lediglich um das Attribut id="re0" erweitert werden, damit das JavaScript das richtige Element zum reload erkennt.
Was macht das JavaScript eigentlich?
Alle 60 Sek. wird an die Adresse (URL) des Bildes ein neuer Parameter angehängt.
Hier: der Unix timestamp.
Beispiel: https://www.terra-hd.de/…/1200.jpg?1655976746645
Der Browser hält die Datei mit geändertem Parameter für eine neue Datei, und holt sie erneut vom Server. Da eine .jpg-Grafikdatei keine Paramerter kennt, wird einfach das Bild 1200.jpg angezeigt. Aber eben das aktuell auf dem Server verfügbare.
¹) Allein die Einsparung von Traffic sollte ausreichend Grund sein, einen refresh der ganzen Seite zu vermeiden.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.