nicht angemeldet
Hallo,
Seit einigen Wochen arbeite ich an einem Projekt, bei dem es zwingend notwendig ist, das sich die Seite, die aufgerufen wird, selbst alle 5 Sekunden aktuallisiert. Das habe ich auch erfolgreich mit dem Tag <meta http-equiv="refresh" content="5;URL=...> geschafft. Nun ist es genau hierbei besonders wichtig, das der Besucher dieser Seite (IE 6) den Aufbau der Seite nicht mitbekommt.
Beschreibung:
Hinter der Seite läuft ein kleines cgi-Script, welches die Daten für die Seite dynamisch zusammen sucht und dann als png wiedergibt. Da die Laufzeit des Scripts ca. 1-2 Sekunden dauert, bemerke ich die Verzögerung auf der Seite. Die Seite verschwindet und es erscheint der Ladehinweis unten im Browser während sich die Seite langsam aufbaut.
Wenn ich dich richtig verstehe, ist der Hauptinhalt der Seite diese Grafik und beim Neuladen geht es vor allem darum, diese Grafik neu aufzubauen. Falls dies zutrifft, wäre möglicherweise JavaScript ein passendes Hilfsmittel, mit den bekannten Nachteilen freilich. Du könntest durch einen Timer alle fünf Sekunden eine Funktion starten, welche ein Image-Objekt erzeugt. Als src gibst du diesem Objekt die Adresse des CGI-Scripts, was das PNG-Bild ausgibt. Damit der Browser nicht zwischenspeichert, hängst du den aktuellen Unix-Timestamp im Query-String an. Mit dieser Zuweisung startet der Browser eine Abfrage und holt sich das Bild vom Server. Nach 1-2 Sekunden liefert der Browser selbiges zurück. Dann kannst du dem Bild auf der Seite die src zuweisen, die das Image-Objekt hat. Dazu arbeitest du mit dem Event onload des Image-Objekts.
Das könnte etwa so aussehen:
<script type="text/javascript">
wechsel_durch_complete=true;
zeit_zwischen_perioden=4000;
zeit_zwischen_completetests=300;
function completewechsel () {
if (!wechsel_durch_complete)
return false;
if (bild.complete) {
document.getElementById('status').innerHTML='completewechsel: Setze Bild und aktiviere holebild-Timeout';
document.images['bild'].src=bild.src;
durch_complete_geaendert=true;
holebild_timeout=window.setTimeout('holebild()', zeit_zwischen_perioden);
} else {
durchlaeufe_completewechsel++;
document.getElementById('status').innerHTML='completewechsel: Bild noch nicht complete ('+durchlaeufe_completewechsel+'. Test), aktiviere completewechsel-Timeout';
completewechsel_timeout=window.setTimeout('completewechsel()', zeit_zwischen_completetests);
}
}
function onloadwechsel () {
if (durch_complete_geaendert)
return false;
wechsel_durch_complete=false;
window.clearTimeout(completewechsel_timeout);
document.getElementById('status').innerHTML='onloadwechsel: Setze Bild und aktiviere Timeout';
document.images['bild'].src=bild.src;
holebild_timeout=window.setTimeout('holebild()', zeit_zwischen_perioden);
}
function holebild (form) {
document.getElementById('status').innerHTML='Hole neues Bild und aktiviere onload / completewechsel-Timeout';
bild=new Image();
bild.src='/cgi-bin/script.cgi?'+new Date().getTime();
bild.onload=onloadwechsel;
durch_complete_geaendert=false;
if (wechsel_durch_complete) {
durchlaeufe_completewechsel=0;
completewechsel_timeout=window.setTimeout('completewechsel()', zeit_zwischen_completetests);
}
}
holebild_timeout=window.setTimeout('holebild()', zeit_zwischen_perioden);
</script>
<div id="status">Status</div>
<p><img src="bild.png" width="640" height="480" name="bild" id="bild"></p>
Nicht alle Browser unterstützen den onload-Event, daher lässt sich in denen mit complete arbeiten. Die Funktion completewechsel() überprüft alle x Millisekunden, ob das Bild schon fertig geladen ist. Dann wird das Bild durch das neue ersetzt. Wenn onload gefeuert wird, wird Die Funktion onloadwechsel() ausgeführt, die den completewechsel()-Wiederholzyklus abbricht und das Bild aktualisiert. Bei weiteren holebild()-Durchläufen wird dann nur noch der onload gestartet.
Mathias