# Bild refresh flackert



## sbmiles21 (22. Oktober 2012)

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 (22. Oktober 2012)

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


----------



## sbmiles21 (22. Oktober 2012)

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

Gruss


----------



## timestamp (22. Oktober 2012)

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 (22. Oktober 2012)

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 (22. Oktober 2012)

Genau das ist das Prinzip.


----------



## sbmiles21 (23. Oktober 2012)

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 (23. Oktober 2012)

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 (23. Oktober 2012)

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


----------



## sheel (23. Oktober 2012)

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.


----------



## tombe (24. Oktober 2012)

Schau mal was passiert wenn du es so machst:


```
<script language="javascript" type="text/javascript">
temp = new Image();

function reloadImage() {
	temp.src = "TESTBILD.JPG";
}

temp.onload = function ()
	{
		if (temp.width != 0) document.images[0].src = temp.src;
	}

setTimeout('reloadImage()', 1000);

</script>

<img src="TESTBILD.JPG" width="640" height="480" style="border: 0px;" />
```

Das neue Bild wird zuerst an "temp" übergeben und (vollständig) geladen. Wenn der Ladevorgang abgeschlossen ist, wird die onload-Funktion aufgerufen und das Bild angezeigt.


----------

