js: dynamische Bilder abfragen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • js: dynamische Bilder abfragen

    Hallo Ihr Lieben,

    da ich hier immer den nötigen Denkanstoss bekomme, wende ich mich heute mal wieder an die Profis hier. Bin über jede Hilfe dankbar.

    Hintergrund: (m)eine Webseite die ein Bild darstellen soll, und ein externer Server der das Bild in einer unvorhersagbaren Zeit erstellt.

    Das script an dem ich arbeite, soll nun das von einem Server erzeugte jpg-Bild auf existenz prüfen.

    Meine bisherige Lösung ist seeeeeehr einfach, mein script wartet 12sec und blendet das jpg ein.

    Da das Bild innerhalb max. 15 sekunden gerendert ist, ist 12sec eine zeit die 95% der Bilder dann auch darstellt, ausser es dauert eben länger, und das ist auch der Haken an der ganzen Geschichte.

    Nun habe ich schon einiges probiert und auch mich mit ein paar Leuten ausgetauscht, nur die Lösungen waren alle nicht optimal.

    Meine 1. Lösung
    - user fordert bild an -> redirect auf Warteseite -> 12sec -> redirect auf Anzeigeseite. klappt zu 95%

    Meine 2. Lösung
    -user fordert Bild an -> redirect auf "neue Seite" ->javascript prüft img.width > 30 -> wenn nein page-reload, wenn ja Bild anzeigen.
    das macht imho einfach keinen guten eindruck wenn die Seite 4-6 mal reloaded wird und immer das klacken zu hören ist etc. auch das "aufflackern" der Page wirkt billig.

    Meine 3. Lösung ( und da brauch ich hilfe )
    -user fordert Bild an -> das jetzige script :
    es soll in einer Schleife prüfen ob img.width grösser dem IE-Platzhalter für "keine grafik gefunden".

    also das Bild ist auch beim ausführen der "user-eingabe-seite" noch nicht auf dem Webspace, und wird nun innerhalb der nächsten 15sec gerendert.

    skript bisher:

    <html>
    <head>
    </head>
    <body>
    <script type="text/javascript">

    var zaehler = 0;
    var img = new Image();

    while (img.width <= 40 && zaehler <= 20) {
    var img = new Image();
    img.src = "testbild.jpg";
    document.write("Bild noch nicht da...<br>");
    //debug alert
    alert ( img.width + " " + img.height );

    zaehler++;


    }

    img.onload = function () { tu was damit die grafik angezeigt wird;};
    </script>
    </body>
    </html>


    Das Problem an der Geschichte ist nun: ich habe zu wenig Ahnung von JS, und ich denke das beim Ausführen der HTML/JS Script Seite, der "IST"-Zustand vom externen Server genommen wird, also quasi wenn das Bild da nicht da ist kann ich so viele Schleifen durchlaufen wie ich will, das ergebnis ( jpg-datei nicht da ) ändert sich nicht. mache ich einen reload der seite, findet er ( natürlich ) die Datei.

    Ich hoffe das Ihr mein Problem im Ansatz erkennt. Eine PHP-Geschichte geht nicht ( da hätte ich auch die Lösung) , auch cgi etc kann ich nicht nehmen. es muss in JS sein.

    Es muss doch aber einen Weg geben, ohne die Page jede Sekunde zu reloaden und dann zu checken. oder aber eine feste Zeit warten.

    Die Zeit zum rendern ist leider nicht vorhersehbar, da es immer auf den derzeitigen Auslastungsfaktor des Servers ankommt, tagsüber max15sec nachts max5sec.

    Ich bedanke mich schonmal im vorraus fürs lesen dieses Textes und würde mich über jede Art von Hilfe erkenntlich zeigen

    viele grüsse vom nachdenkenden strassencoder
    Zuletzt geändert von strassencoder; 16.08.2007, 17:10.

  • #2
    zu 1: nicht gut, weil nicht zuverlässig.

    zu 2: hat die Frizbox, die ich heute eingerichtet habe, nicht anders gemacht. Aber schön ist das nicht.

    zu 3: habs net ganz verstanden, aber da würde ich ansetzen.
    - Bild versuchen anzuzeigen.
    - via js die größe (vielleicht gibt es noch andere eigenschaften?) überprüfen.
    - erneut versuchen das bild anzuzeigen

    allerdings die prüfung nur alle 1-2 sek durchführen, nicht kontinuierlich, wie du es getan hast.

    Bin aber auch für bessere Lösungen offen.

    Kommentar


    • #3
      Hy,

      ich denke du hast die Lösung 3 schon richtig verstanden.
      also der "Platzhalter" ist 28x30px gross, deshalb die Abfrage nach img.width > 30 .

      mein Problem bei Lösung 3 kann ich leider nicht richtig erklären, da mir das Fachwissen dafür fehlt. aber ich denke, wenn diese Seite läd, und das script startet, die Grafik in dem Moment noch nicht da ist, arbeitet das script immer weiter ohne zu erkennnen ,dass nach ca. 5-10 sekunden sich der Zustand geändert hat. und das ist der Punkt, ich gehe einfach mal davon aus, dass mein JS-script immer den Zustand nimmt, der im "www" in dem Moment der ausführung da war.


      Für besseres Verständnis meines Problems hier noch eine kurze Erklärung wie man es nachvollziehen kann.

      Man nehme einen Ordner: darin ein <html>-file mit dem o.g. script. Jetzt ist noch keine jpg-datei da, ich öffne den Browser und rufe das htmlfile auf. es läuft ( von mir aus in einer Endlosschleife ), nun kopiere ich manuel das jpg-file in den ordner, das script läuft aber weiter als ob die grafik nicht da ist. Beim 2. Aufruf ( mit jpg-datei nun in ordner ) erkennt er die grafik und das script hat seine Aufgabe getan.

      ich sag ja , mache ich einen reload per metatag alle 3 sekunden, und prüfe dann geht es, sieht aber billig aus.

      theoretisch ( von mir gedacht ) sollte es so sein, das von mir aus 100mal img.width = 0 bzw 28 ist, dann bei Schleife 151, ist die Grafik unter der vorher schon bekannten url bereit.

      hmmm .... ich wüsste zu gerne was die Lösung ist.

      ich habe das Bild auch schon in einen iframe, bzw an der Bildstelle ein <iframe> eingefügt, das script ( Ansatz nr.2 ) dann über den Frame aufgerufen. dann ist der reload nicht mehr so billig, aber ich kann dadurch das Bild nicht mehr vergrössern ( ist so vorgesehen, angedacht war mal das "lightbox"-script ), was sich nun halt logischerweise in dem Iframe öffnet.

      ich bin für jeden Vorschlag ausser "lass es" offen.

      Gruß vom müden Strassencoder ( es wurde sehr spät gestern )


      EDIT->

      Kleiner Nachtrag noch, ich habe noch einen 4. Ansatz den ich gerne zur Diskussion stellen möchte.

      Nachdem sich ja zeigt, dass es per "reload" geht folgende Überlegung:

      User klickt auf Bild anzeigen -> per JS window.open ein Popup erzeugen, das Popup kann "hinter" der eigentlichen Seite sein, ein Pop-under quasi, in dem Popup läuft das Prüfscript mit reload -> die eigentliche seite bleibt statisch -> Popup hat nun die Datei gefunden und übergibt die Werte wieder an sein "parent"-fenster , dann per img.src oder so die "Platzhalter-bitte warten grafik " in das eigentliche bild ändern ....

      Zuletzt geändert von strassencoder; 17.08.2007, 11:08.

      Kommentar


      • #4
        mein Problem bei Lösung 3 kann ich leider nicht richtig erklären, da mir das Fachwissen dafür fehlt. aber ich denke, wenn diese Seite läd, und das script startet, die Grafik in dem Moment noch nicht da ist, arbeitet das script immer weiter ohne zu erkennnen ,dass nach ca. 5-10 sekunden sich der Zustand geändert hat. und das ist der Punkt, ich gehe einfach mal davon aus, dass mein JS-script immer den Zustand nimmt, der im "www" in dem Moment der ausführung da war.
        Ja, das ist auch richtig. deswegen sollst du das bild entfernen und neu anzeigen.

        User klickt auf Bild anzeigen -> per JS window.open ein Popup erzeugen, das Popup kann "hinter" der eigentlichen Seite sein, ein Pop-under quasi, in dem Popup läuft das Prüfscript mit reload -> die eigentliche seite bleibt statisch -> Popup hat nun die Datei gefunden und übergibt die Werte wieder an sein "parent"-fenster , dann per img.src oder so die "Platzhalter-bitte warten grafik " in das eigentliche bild ändern ....
        Und das Klicken im Hintergrund, wo du u.U. noch nicht mal realisierst, wo es her kommt, findest du besser, als wenn die Seite es selbst tut?

        Kommentar


        • #5
          Original geschrieben von TobiaZ
          Ja, das ist auch richtig. deswegen sollst du das bild entfernen und neu anzeigen.

          Und das Klicken im Hintergrund, wo du u.U. noch nicht mal realisierst, wo es her kommt, findest du besser, als wenn die Seite es selbst tut?
          hmmm ja, eigentlich schon, es gibt ja nur 2 Faktoren die stören, der Page-reload mit flackern, und das klacken bzw was man halt in Windoof-sounds eingestellt hat. und das sind 50% weniger Probleme. das klackern ist halt übrig.

          Aber wir entfernen uns vom eigentlichen Problem. Wie bekommt man Javascript dazu in einem Fenster eine externe Datei auf Existenz zu prüfen, auch wenn die Datei noch nicht da ist und erst 10 sek nach scriptausführung dort physikalisch vorhanden ist, ohne pagereload.

          Viele Grüsse vom aufgewachten Strassencoder

          ps: ist das ein schreibfehler in deiner signatur oder bewusst verwirrend : Da es wieder nötig ist: Ich werde keinen privaten 1:1 Support leisten, außer ich biete--->n ihn ausdrücklich an.
          Zuletzt geändert von strassencoder; 17.08.2007, 12:12.

          Kommentar


          • #6
            Aber wir entfernen uns vom eigentlichen Problem. Wie bekommt man Javascript dazu in einem Fenster eine externe Datei auf Existenz zu prüfen, auch wenn die Datei noch nicht da ist und erst 10 sek nach scriptausführung dort physikalisch vorhanden ist, ohne pagereload.
            Naja, könntest eigentlich nen HTTP-Request senden. Das wäres eigentlich.

            ps: ist das ein schreibfehler in deiner signatur oder bewusst verwirrend : Da es wieder nötig ist: Ich werde keinen privaten 1:1 Support leisten, außer ich biete--->n ihn ausdrücklich an.
            OffTopic:
            Wenn du wüsstest, wie viele Tipper ich da schon verbessert habe. Die Tastatur war leer.

            Kommentar


            • #7
              öööhhh .. .. .. http-request ? ? ? *umpf* ähhhh... ja .... doch ....

              HÄ ?



              jetzt steh ich aufm schlauch, ich meinte zu wissen was ein request ist, aber irgendwie nur im zusammenhang mit Formularen bzw Url´s. Bitte beschreib es kurz für doofies wie mich.

              Gruß SC

              Kommentar


              • #8
                Wenn du nen fertiges Script willst, dann sag das gleich, dann brauch ich mir die Mühe nicht machen. Ansonsten Such im Netz!

                Kommentar


                • #9
                  HA? was isn jetzt los mit Dir ? mach mal langsam.

                  es geht mir doch nicht um ein fertiges script... da hast du was in den falschen Hals bekommen.

                  Nur kann ich mir dem Wortfetzen "http-request senden" einfach noch nichts anfangen. deswegen wollte ich eine kleine Hilfestellung in form von 4-5 stichworten, dass ich es verstehe, nachlesen und darüber nachdenken kann. naja ..... kein tag für Künstler ....

                  beim googlen bin ich aufs http-req. object für ajax gestossen ... ich les mich gerade rein....

                  Kurzer Nachtrag: du hättest auch für Doofies wie mich "XMLHttpRequest" als Beispiel nennen können. Muss nun ein bisschen lesen, und mich reindenken, aber die ersten Sachen die ich gefunden hatte, sagten das man dinge im hintergrund nachladen kann, ohne einen Pagereload. Mal sehen ob das auch mit >dateien geht die noch nicht existieren.

                  Kurze Frage noch: beschreibt die Seite das was du meintest:
                  http://www.w3schools.com/dom/dom_http.asp ?



                  Gruß SC
                  Zuletzt geändert von strassencoder; 17.08.2007, 13:38.

                  Kommentar


                  • #10
                    Nochmal kurz: etwas verstehe ich nicht:

                    " if you need to send an HTTP request from a browser, you will have to use the XMLHttpRequest object."

                    Ich verstehe es so, dass man nur xml-dateien "requesten" kann.

                    ich glaub ich les nich ein bisschen... hoffentlich suche ich nach dem richtigen
                    Begriff.


                    das mit dem http-request hat sich leider auch erledigt, ich bin nun ein paar mal über den Satz:"Der Aufruf von externen Ressourcen wird durch die Sicherheitsbeschränkungen aktueller Browser verhindert." gestossen.

                    das ist leider bei mir der fall. mein webspace ist nicht der Platz wo die Datei nachher zu finden ist. es geht um die Berechnung von oberflächen, der Leiferant stellt die generierten Bilder auf seinem Webspace zur verfügung, und Kunden ( wie ich ) könne sich die Bilder dann abrufen.

                    Vielleicht gibts noch einen anderen weg, auf jeden fall schau ich noch ein bisschen das httpreq-ding an...

                    Gruß SC
                    Zuletzt geändert von strassencoder; 17.08.2007, 13:56.

                    Kommentar


                    • #11
                      .... ich komme der sache näher, ich habe ein Tutorial gefunden wo ein xmlhttprequest-script erklärt wird das "html" files in ein div läd.... ich werde es mal ein bisschen modifizieren das es jpg-dateien läd, mal sehen ob das geht.

                      an der stelle schon mal Dank an TobiaZ , ich denke das war der richtige Lösungsansatz wenn auch für Nullen wie mich etwas Kurz und ruppig beschrieben.

                      Wenn das nicht geht werde ich mit dem "popunder" arbeiten müssen, da am Montag die Seite stehen sollte... naja sind ja noch etwas mehr als 48h....

                      Gruß SC
                      Zuletzt geändert von strassencoder; 17.08.2007, 14:38.

                      Kommentar


                      • #12
                        Dann musst du auf dem webspace nen PHP-Script installieren, welches die existenz einmalig beim aufruf prüft.

                        wenn das nicht möglich ist, hast du mit JS nur die möglichkeit, das bild anzuzeigen und ggf wieder auszublenden und erneut anzueigen.

                        Kommentar


                        • #13
                          schade... also xmlhttpRequest geht leider nicht. LEIDER, es wäre optimal gewesen, aber leider kann das Ergebnis nur ein String sein. Ausser es gäbe da einen Ansatz:

                          request = new XMLHttpRequest();
                          ... alles was nötig ist für o.g.
                          ...

                          request.responseText = ist immer ein String / andere Dinge sind nicht mgl.
                          request.respon************ML = ist immer ein document object...

                          leider kann man da mit .src nichts machen. oder gibt es da einen "workaraound".

                          Gruß SC

                          Kommentar


                          • #14
                            es würde imho reichen, wenn du damit prüfst, ob es nen 404-fehler beim aufruf gibt, oder nicht.

                            Kommentar


                            • #15
                              stimmt eigentlich...

                              also solange "404" kein bild anzeigen, wenn ok dann per document.write oder per image.src dann das Bild einblenden....

                              das probiere ich später mal aus.

                              Gruß SC

                              Kommentar

                              Lädt...
                              X