Bilder nur nachladen wenn auf server veränderung

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

  • Hallo,

    ich habe folgendes Problem ich würde gerne eine Art "online Präsentation " programmieren. Ich habe es auch schon soweit fertig doch läuft das ganze über einen refresh und das klicen im Explorer nervt!

    das ganze funktioniert so:
    in einem Verzeichnis sind die Präsentationsfolien als bilder hochgeladen. Es gibt einen administrationsbereich in dem die "folien" weitergeklickt werden können und einen viewer bereich in dem das ganze angeschaut wird. Im Moment läuft im Viewer Bereich ein refresh dabei wird überpruft ob weitergeklickt wurde, wenn ja dann läd er das neue Bild.
    Hat einer voneuch ne Idee wie ich das mit Ajax machen kann so dass ich nicht mit refresh arbeiten muß.

    ich danke euch

    Gruß Freysein

  • Hi,

    das ist mal ne coole idee..
    also ob der admin zur nächsten folie wechselt oder nicht hast du schon realisiert..
    per php?

    also in meinem beispiel gehe ich davon aus, dass man in der ajax.php immer die aktuelle folie findet..

    hier der code

    Quellcode

    1. function createXMLHttpRequest() {
    3. var ua;
    5. if(window.XMLHttpRequest) {
    6. try {
    7. ua = new XMLHttpRequest();
    8. } catch(e) {
    9. ua = false;
    10. }
    11. } else if(window.ActiveXObject) {
    12. try {
    13. ua = new ActiveXObject("Microsoft.XMLHTTP");
    14. } catch(e) {
    15. ua = false;
    16. }
    17. }
    18. return ua;
    19. }
    21. var req = createXMLHttpRequest();
    23. function sendRequest() {
    24. req.open('get', 'ajax.php');
    25. req.onreadystatechange = handleResponse;
    26. req.send(null);
    27. // **
    28. // Hier der wichtige Teil
    29. // Rufe die Funktion alle 3 Sekunden auf
    30. // **
    31. window.setTimeout("sendRequest()", 3000);
    32. }
    34. function handleResponse() {
    36. if(req.readyState == 4){
    37. var response = req.responseText;
    38. var update = new Array();
    40. if(response.indexOf('||' != -1)) {
    41. update = response.split('||');
    42. document.getElementById(update[0]).innerHTML = update[1];
    43. }
    44. }
    45. else
    46. alert("loading" + ajax.readyState);
    47. }
    Alles anzeigen



    und dann einfach per

    Quellcode

    1. <body onLoad="sendRequest()">

    starten

    ungetested.. aber solle funktionieren

  • Also ich benötige eigentlich genau das Bsp aber irgendwie funktioniert das nicht.

    ich habe eine ajax.php:

    Quellcode

    1. <?php
    2. echo " <CENTER> <img src='webcam.jpg' name='webcam' width='160' height='120'> </CENTER> ";
    3. ?>



    und eine show_webcam.html in der der obige JavaScript Code eingebunden ist.

    leider wird mir das Bild nicht alle 3 Sekunden geladen (es wird gar nichts geladen)
    Danke


    Ziel der Übung ist es ein WebCambild alle 3 Sec ohne refresh zu aktualisieren.

    Vincent

  • das ist das problem, wenn man kein feedback bekommt
    wie gesagt, habe das script nur runtergeschrieben, ohne es zu testen

    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, ...

    Hier der Link zum soeben erstellen How-To:
    [coderwiki]HowTos/Ajax Bild bei Aenderung nachladen[/coderwiki]

    Basiert zu 90% auf diesem How-To: coder wiki Ajax Server zu Client Kommunikation

    PS: Feedback erwünscht *gg*
    (auch wenn ichs dieses mal getested habe)

  • 90 % gelöst - DANKE vorab

    Dieses Script funktioniert nur wen du den debugging DIV Bereich hast (im normalfall) ist der ja auskommentiert.

    entferne mal:
    <div id="debugger" style="position:absolute;right:0px;top:0px;height:100%;width:400px;font-size:11px;background-color:#ffbbbb"></div>

    und das Bild wird nicht mehr aktualisiert.

    Gruß

    Vincent

    oder noch cooler, dass der debug text nicht untereinander kommt sondern immer den 3 sec. alten debug text überschreibt dann kannst du das script so lassen

    Wäre super


    kann das sein das sich das script nach 1 min oder so verabschiedet oder liegt das an meinem firefox?

  • vermutlich hast du den debugger code nicht vollständig entfernt
    entferne ihn aus dem javascript und aus dem html code

    das script ist vermutlich abgebrochen, weil javascript nen fehler geliefert hat ala "object with id debugger not found"

    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. }
    27. //Rekursiv jede Sekunde aufrufen und auf Statusaenderung reagieren
    28. setTimeout("ajax()", 1000);
    29. }
    30. }
    31. req.open('get', 'status.php');
    32. req.send(null);
    33. }
    34. //-->
    35. </script>
    36. </head>
    37. <body onload="ajax()">
    38. <img id="live" src="" alt="Webcam" />
    40. </body>
    41. </html>
    Alles anzeigen

  • stimmt, das war wohl das problem jetzt wird der recher auch nicht mehr so lahm ...
    Danke (ich mache gleich einen neuen thread auf ...)

    Vincent


    //UPDATE
    Ein Problem gibt es noch: das Script bleibt nach ca. 1 Minute stehen ....und erst nach einem reload funktioniert es wieder (für ca. 1 Minute )

    woran kann das liegen?

  • da der algorithmus nicht gerade entartet, ist das schon sehr merkwürdig

    bei mir läuft das script problemlos weiter
    aktuell bin ich bei 6 Minuten...

    verkleiner das aktualisierungsintervall mal auf 100ms
    dann finden wir raus obs an der anzahl der verbindungsaufbaue liegt, oder an der laufzeit von einer minute

    testest du es lokal? vielleicht hat dein webspace-provider da seine finger drin.
    und verbietet zu häufige verbindungsaufbaue
    chats sind ja auch meist verboten (aber selten wirklich geblockt)

  • also bei

    Quellcode

    1. //Rekursiv jede Sekunde aufrufen und auf Statusaenderung reagieren
    2. setTimeout("ajax()", 100);



    friert nach ca. 20 bis 40 sek. das bild ein.
    (Hier zu testen: www.steffek.de rechts webcam), ich lass sie mal laufen ...

    Der Provider hat wissentlich nichts damit zu tun, da es mein eigener server ist.

    Also woran kann es liegen ?

  • das ist doch um so besser Very Happy da können wir viel besser nach fehlern suchen
    also wie gesagt, ich kanns leider nicht reproduzieren

    aber öffne doch bitte mal über Firefox > Extras den JavaScript Debugger und beobachte ob dort etwas erscheint
    (sollte eigentlich kein fehler kommen.. firefox ist firefox...)

    außerdem könntest du mal die apache logs beobachten
    tail -f /var/log/apache2/error.log

    und vielleicht auch die syslogs - falls es eine andere anwendung ist
    (ist ja im prinzip ein guter schutz)

    //EDIT: Jetzt hast du eine PM, damit du das script mal mit deinem firefox auf meinem Server ausführen kannst

  • Folgende fehler kommen:

    Fehler 1)
    Fehler: req is not defined
    Quelldatei: http://www.steffek.de/_webcam/webcam_pc9_start.html
    Zeile: 32

    Fehler2)
    Fehler: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://www.steffek.de/_webcam/webcam_pc9_start.html :: anonymous :: line 32" data: no]
    Quelldatei: http://www.steffek.de/_webcam/webcam_pc9_start.html
    Zeile: 32