AJAX: Bild bei Änderung nachladen

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • In diesem How-To lernt ihr, wir ihr ein sich selbst aktualisierendes Bild einbaut. Das könnte zum Beispiel von einer Webcam stammen.
    == Beschreibung ==
    Man kann das Script anwenden um ein Webcam Bild zu aktualisieren oder einfach, wenn man anderen live irgendetwas zeigen mag.
    Das Script prüft 1x in der Sekunde ob eine Änderung der Datei vorliegt. (Das macht die PHP Funktion filectime())
    Falls eine Änderung vorliegt, wird das Bild mit der id "live" aktualisiert.
    Im Gegensatz zur HTML Refresh Lösung spart diese Lösung Traffic.
    Da der Browser Bilder die Bilder nicht aktualisieren würde, wenn wir mit JavaScript jedesmal den selben Pfad übergeben würde, bedienen wir uns hier eines Workarounds. Wir hängen einfach eine ID (in diesem Falle den Timestamp) an den Dateipfad mit an.
    z.B. webcam.jpg#1154681111, webcam.jpg#1154682111, ...

    == Code ==

    Source Code

    1. <html><head>
    2. <title>Bild bei Änderung nachladen</title>
    3. <script type="text/javascript">
    4. <!--
    5. var timestamp = 0;
    6. function ajax()
    7. {
    8. try {
    9. req = window.XMLHttpRequest?new XMLHttpRequest():
    10. new ActiveXObject("Microsoft.XMLHTTP");
    11. } catch (e) {
    12. //Kein AJAX Support
    13. }
    14. req.onreadystatechange = function() {
    15. if ((req.readyState == 4) && (req.status == 200)) {
    16. var feedback = req.responseText;
    17. var update = new Array();
    18. var Now = new Date();
    19. update = feedback.split('||');
    20. if(timestamp < update[0]) {
    21. timestamp = update[0];
    22. document.getElementById('live').src = update[1];
    23. document.getElementById('debugger').innerHTML += Now.toLocaleString() + ': Bild aktualisiert<br />';
    24. } else {
    25. document.getElementById('debugger').innerHTML += Now.toLocaleString() + ': Kein Update verfügbar<br />';
    26. }
    27. //Rekursiv jede Sekunde aufrufen und auf Statusaenderung reagieren
    28. setTimeout("ajax()", 1000);
    29. }
    30. }
    31. req.open('get', 'status.php');
    32. req.setRequestHeader("Pragma","no-cache");
    33. req.setRequestHeader("Cache-Control","must-revalidate");
    34. //req.setRequestHeader("If-Modified-Since","Sat, 1 Jan 2000 00:00:00 GMT");
    35. req.send(null);
    36. }
    37. //-->
    38. </script>
    39. </head>
    40. <body onload="ajax()">
    41. <img id="live" src="" alt="Webcam" />
    42. <div id="debugger" style="position:absolute;right:0px;top:0px;height:100%;width:400px;font-size:11px;background-color:#ffbbbb"></div>
    43. </body>
    44. </html>
    Display All

    35,968 times viewed