Bilder automatisch aktualisieren

Scripte > Bildobjekte

Automatische Bildaktualisierungen

Die klassische Art der Bildaktualisierung ist die Übertragung per FTP-Upload oder mit einem Batch Script. Das Bild wird auf dem Webserver regelmäßig hochgeladen und über die Webseite angezeigt. Damit der Nutzer auch regelmäßig das aktuelle Bild zu sehen bekommt, müsste dieser auch regelmäßig seinen Browser aktualisieren. Fraglich wäre welcher Nutzer das gern tut bzw. woher er das wissen sollte. Die nachfolgenden Möglichkeiten nehmen diese Arbeit ab.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken. HEAD-Code (wenn vorhanden) in den HEAD-Bereich <head>.....</head>, Startcode (wenn vorhanden) in den Body-Tag <body onload="...."> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen. Danach einfach die URL-Pfade, gegebenenfalls auch in den Attributen, zum Bild/zu den Bildern und die Variable "refresh" im Java-Script anpassen. Ein normaler Aktualisierungsrythmus wäre alle 30 bis 60 Sekunden.

Die Bilder werden nicht aus dem Cache geladen!

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Dies kann aber auch durch einen Doppelklick ausführt werden.

x runter geladen

Automatische Aktualisierung durch Meta-Tag
Die Bildaktualisierung durch einen Meta-Tag im Dateikopf (HEAD-Bereich).
Das Bild wird wie eine normale Grafik eingebunden. Javascripts, Java-Applets oder zusätzliche Plugins werden nicht benötigt. Hier muss aber die Einstellung des Intervalls zur Aktualisierung (refresh) im <body> Tag gestartet werden. Dies erfolgt mit <body onload="...">.

Bei der Aktualisierung wird die komplette Seite neu geladen, was besonders bei kurzen Intervallen störend wirkt.

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

Nach dem <BODY> Tag

Automatische Aktualisierung per Javascript
Die Bildaktualisierung erfolgt mit Javascript.

Auf diese Weise können auch beliebige viele Bilder eingebunden werden.

Durch einen Klick auf das Bild wird das jeweilige Bild durch das Attribut

target="_blank" in voller Größe auf einer neuen Seite im Browser angezeigt.

Code für den <BODY> Bereich

// <![CDATA[
// Auffrischungsintervall in Sekunden
var refresh = 60; // 1 Minute

var imageURL = "wsX5Obj/Obj_IMG/natur_02.jpg"; // Pfad und Datei

function ImgRetry() {

setTimeout("ImgLoad()", refresh*1000);

}
function ImgLoad() {

if (imageURL == "") imageURL = document.images.Obj161_1.src;
var timestamp = new Date();
timestamp = "?" + timestamp.getTime();
document.images.Obj161_1.onload = "wsX5Obj/Obj_IMG/natur_02.jpg"; // Pfad und Datei
document.images.Obj161_1.src = imageURL + timestamp;
setTimeout("ImgLoad()", refresh*1000);

}
// ]]>

</script>

<img name="Obj161_1" src="wsX5Obj/Obj_IMG/natur_02.jpg"

onload="ImgLoad()" onerror="ImgRetry()" width="250" height="180" alt="Demo-Bild" /></a>

Nach dem <BODY> Tag

Code für den <BODY> Bereich

// <![CDATA[
// Auffrischungsintervall in Sekunden
var refresh = 60; // 1 Minute
var imageURL161_2 = "wsX5Obj/Obj_IMG/natur_03.jpg"; // Pfad und Datei
var imageURL161_3 = "wsX5Obj/Obj_IMG/natur_04.jpg"; // Pfad und Datei
function ImgRetry() {

setTimeout("ImgLoad()", refresh*1000);

}
function ImgLoad() {

if (imageURL161_2 == "") imageURL161_2 = document.Obj161_2.src;
var timestamp = new Date();
timestamp = "?" + timestamp.getTime();
document.images.Obj161_2.onload = "wsX5Obj/Obj_IMG/natur_03.jpg"; // Pfad und Datei
document.images.Obj161_2.src = imageURL161_2 + timestamp;
setTimeout("ImgLoad()", refresh*1000);
if (imageURL161_3 == "") imageURL161_3 = document.Obj161_3.src;
var timestamp = new Date();
timestamp = "?" + timestamp.getTime();
document.images.Obj161_3.onload = "wsX5Obj/Obj_IMG/natur_4.jpg"; // Pfad und Datei
document.images.Obj161_3.src = imageURL161_3 + timestamp;
setTimeout("ImgLoad()", refresh*1000);

}
// ]]>

</script>

<img name="Obj161_2" src="wsX5Obj/Obj_IMG/natur_03.jpg"
onload="ImgLoad()" onerror="ImgRetry()" width="250" height="180" alt="Bild1" /></a>

<img name="Obj161_3" src="wsX5Obj/Obj_IMG/natur_04.jpg"
onload="ImgLoad()" onerror="ImgRetry()" width="250" height="180" alt="Bild2" /></a>

Nach dem <BODY> Tag

Automatische Aktualisierung mit Javascript und Counter
Bei dieser Lösung übernimmt auch ein Javascript die Aktualisierung der Seite. Zusätzlich zeigt ein Counter dem Besucher an, wann das Bild neu geladen wird.

Hier muss aber die Einstellung des Intervalls zur Aktualisierung (Counter) im <body> Tag gestartet werden. Dies erfolgt mit <body onload="...">.

Mit dem Attribut size="2" wird die Schriftgröße für den Zähler eingestellt.

Das Script ist auch für ältere Browser geeignet.

Code für den <HEAD> Bereich

if (document.images) var refInterval = 0;
else var refInterval = 30;
function startCounter() {

refInterval = refInterval - 1;
var now = new Date();
var dummystring = parseInt(now.getTime() / 1000);
if (refInterval < 1) {

// Pfad und Datei hier eingeben
if (document.images) document.refImage.src = "wsX5Obj/Obj_IMG/natur_05.jpg" + "?" + dummystring;
else window.location.reload();
refInterval = 30;

}
document.counter.time.value = refInterval;
timerID = setTimeout("startCounter()", 1000);

}

</script>

Vor dem </HEAD> Tag

Code für den <BODY> Tag

onload="startCounter(); reFresh();"

Wer nicht mit Website X5 arbeitet:

Innerhalb des <BODY> Tag

Code für den <BODY> Bereich

Das Bild wird in <input type="text" name="time" size="2" value="-"> Sekunden aktualisiert.

</form>

Nach dem <BODY> Tag

» nach oben «