Bilder automatisch aktualisieren - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

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 jeweils beigefügt. Diese kann zum Test durch einen Doppelklick ausgeführt werden.

Download Button
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
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="refresh" content="60">
Code für den <BODY> Bereich
<img src="wsX5Obj/Obj_IMG/natur_01.jpg" width="250" height="180">
Demo-Bild
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
<script>
// <![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>

<a href="wsX5Obj/Obj_IMG/natur_02.jpg" target="_blank">
<img name="Obj161_1" src="wsX5Obj/Obj_IMG/natur_02.jpg"
onload="ImgLoad()" onerror="ImgRetry()" width="250" height="180" alt="Demo-Bild" /></a>
Bild1     Bild2
Code für den <BODY> Bereich
<script>
// <![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>

<a href="wsX5Obj/Obj_IMG/natur_03.jpg" target="_blank">
<img name="Obj161_2" src="wsX5Obj/Obj_IMG/natur_03.jpg"
onload="ImgLoad()" onerror="ImgRetry()" width="250" height="180" alt="Bild1" /></a>
&nbsp; &nbsp;
<a href="wsX5Obj/Obj_IMG/natur_03.jpg" target="_blank">
<img name="Obj161_3" src="wsX5Obj/Obj_IMG/natur_04.jpg"
onload="ImgLoad()" onerror="ImgRetry()" width="250" height="180" alt="Bild2" /></a>
Das Bild wird in Sekunden aktualisiert.
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
<script>
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>
Code für den <BODY> Tag
onload="startCounter();reFresh();"

Wer nicht mit Website X5 arbeitet:
<body onload="startCounter();reFresh();">
Code für den <BODY> Bereich
<img src="wsX5Obj/Obj_IMG/natur_05.jpg" name="refImage" width="250" height="180">
<form name="counter">
Das Bild wird in
<input type="text" name="time" size="2" value="-">
Sekunden aktualisiert.
</form>
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 83 Heute
» 203 Gestern
» 507 Woche
» 2507 Monat
» 137424 Jahr
» 465180 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt