Bilder aktualisieren - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Bilder aktualisieren

Scripte > Bildobjekte

Automatische Bildaktualisierungen

Die klassische Art der Bildaktualisierung ist die Übertragung per FTP-Upload. Das Bild wird auf dem Webserver regelmäßig hchgeladen 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 aktualisierent. Fraglich wäre welcher Nutzer das gern tut bzw. woher er das wissen sollte. Die nachfolgenden Möglichkeiten nehmen diese Arbeit ab.

Die ZIP-Datei laden, entpacken und Code entsprechend in die Bereiche der Webseite einbinden. Ein normaler Aktualisierungsrythmus wäre alle 30 bis 60 Sekunden. Die Bilder werden nicht aus dem Cache geladen!

Aktualisierung duch 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. 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]

<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="refresh" content="60">

Code für das HTML-Objekt:

[Objekt HTML]

<img src="images/demo_img1.jpg" width="250" height="180">

Demo-Bild

Aktualisierung per Javascript
Die Bildaktualisierung erfolt durch Javascript.
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.

Code für das HTML-Objekt:

[Objekt HTML]

<script type="text/javascript" language="JavaScript">
//
<![CDATA[
// Auffrischungsintervall in Sekunden
var refresh = 60; // 1  Minute
var imageURL = "images/demo_img2.jpg";
function ImgRetry() {
setTimeout("ImgLoad()", refresh*1000);
}
function ImgLoad() {
if (imageURL == "") imageURL = document.images.hw18.src;
var timestamp = new Date();
timestamp = "?" + timestamp.getTime();
document.images.hw18.onload = "images/demo_img2.jpg";
document.images.hw18.src = imageURL + timestamp;
setTimeout("ImgLoad()", refresh*1000);
}
// ]]>

</script>
<img name="hw18" src="images/demo_img2.jpg" onload="ImgLoad()" onerror="ImgRetry()" width="250" height="180" alt="Demo-Bild" />

Das Bild wird in Sekunden aktualisiert.

Automatische Aktualisierung mit Javascript und Counter
Bei dieser Lösung übernimmt ein JavaScript die Aktualisierung der Seite. Zusätzlich zeigt ein Counter dem Besucher an, wann das Bild neu geladen wird. Das Script ist auch für ältere Browser geeignet.

Code innerhalb BODY-Tag:

[Im Tag BODY]

onload="startCounter()"

Wer nicht mit Website X5 arbeitet:
<body onload="startCounter()">

Code für den HEAD-Bereich:

[Vor dem /HEAD]

<script language="JavaScript">
<!--
if (document.images) var refInterval = 0;
 else var refInterval = 15; // Sekunden
function startCounter() {
 refInterval = refInterval - 1;
 var now = new Date();
 var dummystring = parseInt(now.getTime() / 1000);
if (refInterval < 1) {
if (document.images) document.refImage.src = "images/demo_img1.jpg" + "?" + dummystring;
 else window.location.reload();
 refInterval = 15;
}
 document.counter.time.value = refInterval;
 timerID = setTimeout("startCounter()", 1000);
}
//-->

</script>

Code für das HTML-Objekt:

[Objekt HTML]

<img src="images/demo_img3.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 ""

es gibt insgesamt 4 Kommentar(e)


  1. k. Haider schreibt am 18.07.2018, 20.27 Uhr

    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

  2. A. Schulze schreibt am 31.05.2018, 08.13 Uhr

    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.

  3. Klaus Panitzek http://bswetter.de schreibt am 01.07.2016, 20.09 Uhr

    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 ?

  4. Ralf Sbieschni http://www.wetter-neugersdorf.de schreibt am 30.04.2016, 20.13 Uhr

    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.


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 5 Online
 » 16 Heute
 » 1091 Woche
 » 3303 Monat
 » 47064 Jahr
 » 293642 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü