Bild refresh flackert

[sbmiles21]

Hallo zusammen,

ich habe einer Webcam, welche alle 2 Sekunden ein Foto per ftp auf meinen Server geupped.
Auf meiner Seite Wir das Bild angezeigt und mit via script alle 2 sekunden aktualisiert. So funktioniert auch alle, ausser das das Bild auf der Website, beim aktualisieren, sich immer "Aufbaut" bzw. das Bild flakert.

Wie bekommt man es hin, das diese Dinge halt vermieden werden? Wäre schön wenn es kein flakern geben würde, nur das ich das neue Bild direkt sehe.,

Für Tips wäre ich dankbar.

Mein Code:

<title>Control-Panel</title>

<script language="JavaScript"><!--
			function reloadImage() {
				var now = new Date();
				if (document.images) {
					document.images.TESTBILD.src = 'TESTBILD.jpg?' + now.getTime();
				}
				setTimeout('reloadImage()',1000);
			}
			
			setTimeout('reloadImage()',1000);
//--></script>
</head>

<img src="TESTBILD.jpg" name="TESTBILD" width="400" height="400" /></td>

 

[timestamp]

DoubleBuffering.
Lade das Bild unter dem bereits bestehendem Bild. Sobald es vollständig geladen ist, schiebst du es in den Vordergrund.

 

[sbmiles21]

danke für die schnell Antowort.
Bin leider noch Anfänger, wie geht das genau?

Gruss

 

[timestamp]

Erstmal ist JavaScript kein Java. Unterschied wie Tag und Nacht (verschiebt ein Mod später bestimmt).
Ist jetzt nicht getestet, aber versuche es mal so:

<div id="doublebuffering">
  <div id="buffer0"><img src="meinBild.jpg" /></div>
  <div id="buffer1" style="display:none;"></div>
</div>
<script type="text/javascript">double_buffering('meinBild.jpg', 'buffer0', 'buffer1', 1000);</script>

function double_buffering(url, id1, id2, time){
  document.getElementById(id2).innerHTML = '<img src='+url+' />';
  setTimeout('switch_buffers("'+id2+'", "'+id1+'")', time);
  setTimeout('double_buffering("'+url+'", "'+id2+'", "'+id1+'", '+time+')', 1000);
}
function switch_buffers(id1, id2){
  document.getElementById(id1).style.display = 'block';
  document.getElementById(id2).style.display = 'none';
}

 

[sbmiles21]

mhh habs eingefügt, aber immer noch ein Bildaufbau.
Wie ist es denn vom Prinzip?

1. Teige Bild in div
2.Laden Bild2 im Hintergrund
3.div´s wechseln?

Gruss

 

[timestamp]

Genau das ist das Prinzip.

 

[sbmiles21]

Also ich komme da irgendwie nicht weiter. habe auch alles im Netz durchsucht, aber nichts brauchbares gefunden.
Meine Webcam ladet folgende Datei hoch: Testbild.jpg , leider ohne Zeitanhang o.ä.

wie gesagt, will nur das ich diesen Bildaufbau bzw. ein flakern nicht sehe.

Hast du/ihr vielleicht einen Tip bzw. eine Seite wo ich solch einen Code finden kann?

Danke

Gruss

 

[tombe]

Keine Ahnung wie groß das Bild ist (Kilobyte, Megabyte, ...).
Wenn du eine Möglichkeit hast hier was zu ändern könnte es den Bildaufbau auch schon schneller machen!?

 

[sbmiles21]

mhh, es ist 40kb mit 640x480Px ...mhh...

 

[sheel]

Teste mal sicherheitshalber mit Firebug oÄ., wie lange das zum Laden braucht.
Wenn das das Problem bestätigt:

Irgendwo möglichst am Rand der Seite irgendwo ein 1x1px-img,
dort das Bild per JS zuerst rein. Erst etwas später dann
auf die eigentliche große Zielfläche.

So beginnt der Browser eben schon verfrüht mit dem Laden
und hat das Bild zum Groß-Zeitpunkt schon im Cache.
Nachteil: Alles etwas mehr verzögert.