AJAX: Bild bei Änderung nachladen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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 ==

    Quellcode

    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. }
    15. req.onreadystatechange = function() {
    16. if ((req.readyState == 4) && (req.status == 200)) {
    17. var feedback = req.responseText;
    18. var update = new Array();
    19. var Now = new Date();
    21. update = feedback.split('||');
    22. if(timestamp < update[0]) {
    23. timestamp = update[0];
    24. document.getElementById('live').src = update[1];
    25. document.getElementById('debugger').innerHTML += Now.toLocaleString() + ': Bild aktualisiert<br />';
    26. } else {
    27. document.getElementById('debugger').innerHTML += Now.toLocaleString() + ': Kein Update verfügbar<br />';
    28. }
    30. //Rekursiv jede Sekunde aufrufen und auf Statusaenderung reagieren
    31. setTimeout("ajax()", 1000);
    32. }
    33. }
    34. req.open('get', 'status.php');
    35. req.setRequestHeader("Pragma","no-cache");
    36. req.setRequestHeader("Cache-Control","must-revalidate");
    37. //req.setRequestHeader("If-Modified-Since","Sat, 1 Jan 2000 00:00:00 GMT");
    38. req.send(null);
    39. }
    40. //-->
    41. </script>
    42. </head>
    43. <body onload="ajax()">
    45. <img id="live" src="" alt="Webcam" />
    46. <div id="debugger" style="position:absolute;right:0px;top:0px;height:100%;width:400px;font-size:11px;background-color:#ffbbbb"></div>
    48. </body>
    49. </html>
    Alles anzeigen

    36.127 mal gelesen