Bilder automatisch aktualisieren - Website X5 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
Downloads:
Bild Natur 1
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
<!-- Bild wird alle 60s aktualisiert, siehe content="60" -->
<img src="wsX5Obj/Obj_IMG/natur_01.jpg" style="width=:250px; height:180px;" alt="Bild Natur 1">
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>
Bild Natur 5
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" style="width=:250px; height:180px;" alt="Bild Natur 5">
<form name="counter">
Das Bild wird in
<input type="text" name="time" size="2" value="-">
Sekunden aktualisiert.
</form>
Feedbacks zu ""

Klaus Haider

18.07.2018, 18:27

+0 -0  

Vielen Dank für diesen Threat - ich bin ein Anfänger in Sachen HTML und hier wurde mir schon mehrmals geholfen!
Ich versuche auf meiner Seite drei Webcams einzubinden - hierzu finde ich die automatische Aktualisierung per Javascript super. Leider funktioniert das bei mir jedoch immer nur auf einer Cam (die Kameras werden auf einem Server gespeichert und alle 3 Minuten dort aktualisiert - per Url wurde es verlinkt).
Was mach ich hier falsch?
Vielen Dank für eure Hilfe

Axel Schulze

31.05.2018, 06:13

+0 -0  

Erst einmal ein großes Kompliment für die Seite und den Aufwand den Ihr hier betreibt. Nun meine Frage, kann man den Code so anpassen das alle 24h zu einer gewissen Uhrzeit ein neues Foto auf der Webseite erscheint?
Für ein Feedback wäre ich dankbar!!!! Ich möchte diesen Code gerne auf unserer Webseite einbinden.

Klaus Panitzek

01.07.2016, 18:09

+0 -0  

Hallo, das hier kapiere ich nicht : Auf diese Weise können beliebige viele Bilder eingebunden werden. Einfach die URL zum Bild ändern, im src-Attribut des img-Tags und und gegebenenfalls die Variable refresh im Java-Script anpassen.Ich möchte 2 bilder im wechsel anzeigen lassen bzw. neu laden lassen.An welchen schrauben muss ich denn da drehen ?

Ralf Sbieschni

30.04.2016, 18:13

+0 -0  

Habe das Script jetzt in verschiedenen Varianten probiert, komme nicht mehr weiter, ich möchte mehrere Bilder auf einer Seite aktualisieren, komme aber mit den Einstellungen nicht klar, kannst Du mir mal ein Beispielscript nennen?? Bilddatei 1" instr_t.gif", Datei 2 " instr_f.gif"Bei mir erscheint dann immer eine Datei auf mehreren Feldern, und nur eine aktualisiert sich.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 4 Online
            » 67 Heute
            » 115 Gestern
            » 390 Woche
            » 2598 Monat
            » 49559 Jahr
            » 273765 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt