fastix®: Bilder per AJAX neu laden

Beitrag lesen

Moin!

Wenn Du obiges Beispiel verstanden hast, kannst Du die Daten(*) die veränderlich sind auch mit Ajax vom Server anfordern.

Ajax ist hier völlig fehl am Platz. Du willst sowas:

<html>  
<head>  
    <script type="text/javascript"  
    var nextInSec=5;  
  
    var nextInMilliSec=timeInSec*1000;  
    var counter=0;  
  
    window.setTimeout('BildHolen("webcam1")', nextInMilliSec;  
  
    function BildHolen(objId) {  
        obj=document.getElementById(objId);  
        counter++;  
        obj.src='http://www.example.org/pfad/image.png?foo=bar&counter='+counter;  
        window.setTimeout('BildHolen("webcam1")', nextInMilliSec;  
    }  
</script>  
</head>  
  
<body>  
    <img id="webcam1" alt="Webcam" src="http://www.example.org/pfad/image.png?foo=bar&counter=0" title="Das Bild wird aller 5 Sekunden oder auf Mausklick neu geladen." onclick="BildHolen('webcam1')" />  
</body>  
</html>

Du rufst x Sekunden (Konfiguriert in Variable nextInSec) die Funktion BildHolen(objId) ab. "objId" ist die ID des HTML-Elements img. Die Funktion baut den String zusammen, hierbei ist der Zähler (counter) wichtig, wird der nicht verändert lädt der Browser (der fest daran glaubt, dass eine Grafik eine Grafik und nichts dynamisches ist) keine Grafik von Server - die ist ja seiner Ansicht nach nicht neu. Mit dem Counter als Parameter schon. Die Funktion stellt einen Wecker und sorgt dafür, dass sie nach x Sekunden neu aufgerufen wird.

Hinweis: Der Beispielcode code ist ungetestet, muss ggf. noch debuggt werden.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

--
Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Seminare, Training, Development