Dynamischer Grafik-Preload mit PHP & JS

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

  • Dynamischer Grafik-Preload mit PHP & JS

    Ich baue gerade ein Preload für Grafiken.
    Da dieser in einem CMS eingebaut wird, weiss man natürlich vorher nicht, welche Grafiken auf der Seite eingebunden sind und oft auch nicht, wo diese liegen.
    Um nun trotzdem die Grafiken zum Aufbau des Preloaders einzulesen, muss ich ja nun aus einem IMG-Tag die URL-Information aller Grafiken finden und auslesen (Rot und Fett):
    Code:
    <img SRC="[b][COLOR=red]/graphics/logo.gif[/COLOR][/b]" WIDTH=150 HEIGHT=35 ALT="AlternativText" BORDER="0">
    , um diese Informationen zu zählen, das Preload aufzubauen etc. pp.
    Wie kann ich nun z.B. alles, was zwischen einem <img SRC=" und .gif /.jpg /.png" steht, auslesen? In diesem Fall natürlich trotzdem mit Datei-Endung.

    Danke und beste Grüsse, Guido

  • #2
    Re: Dynamischer Grafik-Preload mit PHP &amp; JS

    am besten natürlich mit regulären ausdrücken.
    dabei aber beachten, dass src=" nicht direkt hinter <img stehen stehen muss, sondern z.b. auch erst width, height oder alt definiert sein können.

    erster schnellschuss ohne garantie:

    Code:
    /\<img (?:.*?)src=\"(.*?)\" (?:.*?)\>/i
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar


    • #3
      iMage-Preload

      Also das verstehe ich nicht:

      "Da dieser in einem CMS eingebaut wird, weiss man natürlich vorher nicht, welche Grafiken auf der Seite eingebunden sind und oft auch nicht, wo diese liegen. "

      Gerade im CMS sind ja irgendwo die verfügbaren Bilder und ihre Zuordnung zu den Seiten gespeichert. Oder bist du gerade auf der Seite, die diese Zuordnung ermöglichen soll?

      Ich würde folgende Strategie anwenden:
      - php-Abfrage der verfügbaren Bilder in einem bestimmten Verzeichnis mit opendir() und readdir(). Du öffnest das Verzeichnis, und liest mit einer Schleife alle Dateinamen in ein Array ein. Dabei achtest du darauf, rekursive Links, index-Dateien und ähnliches auszuschließen.

      - Die Arraywerte printest Du dann mit php in den JavaScript-Code.

      Ist eigentlich nicht so schwer. Quellcode auf Anfrage, müßte da aber erst eine öffentliche Variante erstellen (wegens der der Sicherheid, weßde).
      /* Meine Lieblingsantwort: Read The Fucking Manual */

      Kommentar


      • #4
        aber mal ne ganz andere frage dazu...

        warum überhaupt preloaden???
        INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


        Kommentar


        • #5
          Ich werde wohl die Variante mit regulären Ausdrücken bevorzugen (müssen). Diese scheint am flexibelsten zu sein in meinem Fall.

          warum überhaupt preloaden???
          Weil der, für den ich das bastle, unbeddingt einen Preload möchte auf Seiten, wo viel Grafik ist.

          Gerade im CMS sind ja irgendwo die verfügbaren Bilder und ihre Zuordnung zu den Seiten gespeichert. Oder bist du gerade auf der Seite, die diese Zuordnung ermöglichen soll?
          Das ist nicht immer so, da man über den Wysiwyg-Editor auch externe Bilder, z.B. von anderer URL oder aus anderem Verzeichnis etc. per Drag'nDrop einfügen kann.

          Kommentar


          • #6
            Bin erst einmal mit den regulären Ausdrücken halbwegs vorwärts gekommen, hännge jetzt jedoch am Rückgabe-Wert
            und an dem Funktionsaufruf.
            Hier komme ich jedoch nicht weiter.
            1. Problem:
            PHP-Code:
            $pattern1 "/\<img (?:.*?)src=\"(.*?)\" (?:.*?)alt=\"(.*?)\" (?:.*?)name=\"(.*?)\" (?:.*?)\>/i"
            lässt nur die Reihenfolge
            Code:
            <img src="testgrafik/bild-2.gif" alt="GIF Grafik 2" name="prel" width="50" height="50">
            name="prel" ist dabei der Kenzeichner, dass dieses Bild vorgeladen werden soll und alt="text"
            (eher unwichtig) für weitere Spielereien, z.b. Textanzeige bei Ladestatus.
            Sobald scr, name und alt eine andere Reihenfolge haben, wird mir kein Ergebnis ausgegeben.
            2. Problem:
            Im Moment erfolgt der Output innerhalb der Funktion. Dieser soll jedoch erst aus dem Returnwert erzeugt werden,
            durch Auswertung von
            PHP-Code:
            return $matches
            Und da steckt mein ARRAY-Wissen auch noch etwas in den Kinderschuhen.

            Hier erst einmal meinen bisherigen "erfolglosen" Erfolg :
            PHP-Code:
            <html><head>
            <TITLE>Selbstest</TITLE>
            </head><body>
            <?php
            function preg_match_all_array$pattern$file ) {
                
            $fp fopen ($file,"r");
                if (!
            $fp) {
                    echo 
            "couln't open $file";
                    return 
            false;
                } else {
                    
            $stringtoregex fread($fp,6000000);
                    
            fclose($fp);
                }
                
            preg_match_all ($pattern$stringtoregex$matches);
                   for (
            $i=0$icount($matches[0]); $i++) {
                      echo 
            "<p>matched: ".$matches[0][$i]."\n<br>";
                      echo 
            "part 1: ".$matches[1][$i]."\n<br>";
                      echo 
            "part 2: ".$matches[2][$i]."\n<br>";
                      echo 
            "part 3: ".$matches[3][$i]."\n<br>&nbsp;<br>";
                    }
                return 
            $matches;
            }

            //$pattern1 = "/\<img (?:.*?)src=\"(.*?)\" (?:.*?)\>/i";
            $pattern1 "/\<img (?:.*?)src=\"(.*?)\" (?:.*?)alt=\"(.*?)\" (?:.*?)name=\"(.*?)\" (?:.*?)\>/i";
            $arr preg_match_all_array$pattern1"L:\www".$PHP_SELF );

            echo 
            "Auswertung sollte hier erfolgen:\n<hr>\n";
            echo 
            "<pre>";
            echo 
            print_r(array_change_key_case($arr));
            echo 
            "</pre>";
            echo 
            "\n<hr>\nEnde Auswerungs-Array";

            echo <<< SELFCHECK
            <p><img alt="GIF Grafik 1" src="testgrafik/bild-1.gif" name="prel" width="50" height="50">&nbsp;
            <img src="testgrafik/bild-2.gif" alt="GIF Grafik 2" name="prel" width="50" height="50">&nbsp;
            <img src="testgrafik/bild-3.gif" alt="GIF Grafik 3" name="prel" width="50" height="50"></p>
            </body>
            </html>
            SELFCHECK;
            ?>

            Kommentar


            • #7
              Ergänzung zu Problem 2:
              Original
              Im Moment erfolgt der Output innerhalb der Funktion. Dieser soll jedoch erst aus dem Returnwert erzeugt werden,
              durch Auswertung von return $matches;...
              PHP-Code:
              echo print_r(array_change_key_case($arr)); 
              Dieser Aufruf ergibt
              Code:
              Array
              (
                  [0] => Array
                      (
                          [0] => <img src="testgrafik/bild-2.gif" alt="GIF Grafik 2" name="prel" ...>
                          [1] => <img src="testgrafik/bild-3.gif" alt="GIF Grafik 3" name="prel" ...>
                      )
              
                  [1] => Array
                      (
                          [0] => testgrafik/bild-2.gif
                          [1] => testgrafik/bild-3.gif
                      )
              
                  [2] => Array
                      (
                          [0] => GIF Grafik 2
                          [1] => GIF Grafik 3
                      )
              
                  [3] => Array
                      (
                          [0] => prel
                          [1] => prel
                      )
              
              )
              Ich schaue zwar gerade alle ARRAY-Funktionen duch, finde aber keinen Weg, den Haupt- und Subarray auszuwerten.

              Kommentar


              • #8
                Original geschrieben von Guido
                Ich schaue zwar gerade alle ARRAY-Funktionen duch, finde aber keinen Weg, den Haupt- und Subarray auszuwerten.
                was genau brauchst du denn zur bearbeitung dieses arrays?
                INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


                Kommentar


                • #9
                  Also ausgehend von folgendem Array (hier der Kürze halbe mit nur einem Bild und ohne "alt")
                  würde obenstehende Funktion preg_match_all_array() folgendes mit print_f ergeben (kann man print_f auswerten?):
                  PHP-Code:
                  Array
                  (
                      [
                  0] => Array
                          (
                              
                  // komplett erkannter IMG-Tag wird nicht unbedingt benötigt
                              // soll (eventuell) [b][COLOR=red]$img_tag[0][/COLOR][/b] ergeben
                              
                  [0] => <img src="testgrafik/bild-2.gif" name="prel"
                          )

                      [
                  1] => Array
                          (
                              
                  // relativer Pfad des zu ladenden Bildes
                              // soll [b][COLOR=red]$rel_url[0][/COLOR][/b]  ergeben
                              
                  [0] => testgrafik/bild-2.gif
                          
                  )

                      [
                  2] => Array
                          (
                              
                  // name="prel" ist kennzeichnet, dass dieses Bild vorgeladen werden soll
                              // alle ARRAYS ohne diesen Wert werden ignoriert
                              // ergibt vielleicht [b][COLOR=red]$load = true[/COLOR][/b]
                              
                  [0] => prel
                          
                  )

                  Jetzt soll oben stehender ARRAY so ausgewertet werden, dass es mir bei mehreren Grafiken letztendlich möglich ist,
                  diese nacheinander abzuarbeiten nach dem Schema
                  PHP-Code:
                  (arbeite_jedes_bild_ab[$i]) { //  nur wie?
                    
                  if ($load[$i]) {
                      echo 
                  "Mache etwas mit " $rel_url[0] . " ...";
                    }

                  Kommentar


                  • #10
                    du weisst ja in der regel wieviele ebenen das erste array hat.
                    - alles
                    - url
                    - name
                    - usw.

                    jedes dieser elemente besitzt einen festen index.

                    somit würde es ausreichen, wenn du nur das erste
                    innere array betrachtest, um an die einzelnen werte
                    zu kommen.

                    so müsste es gehen. habs aber nicht getestet.

                    PHP-Code:
                    <?php

                      
                    foreach ($array[0] as $index => $inhalt)

                        echo 
                    "alles " $array[0][$index] . "<br>";
                        echo 
                    "url   " $array[1][$index] . "<br>";
                        echo 
                    "name  " $array[2][$index] . "<br>";
                        echo 
                    "usw.  " $array[3][$index] . "<br><br>";
                      
                      }

                    ?>
                    info:
                    gehe in array-index 0 alle unter indizies durch.
                    jedes der unterindizies ist in den obereren punkten
                    der reihenfolge entsprechend vorhanden. also interessiert
                    dich der hauptindex nicht....

                    verstanden?

                    klappt es?
                    INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


                    Kommentar


                    • #11
                      In etwa so?!
                      PHP-Code:
                      <?php

                      function preg_match_all_array$pattern$file ) {
                          
                          
                      $fp fopen ($file,"r");
                          if (!
                      $fp) {
                              echo 
                      "couln't open $file";
                              return 
                      false;
                          } else {
                              
                      $stringtoregex fread($fp,6000000);
                              
                      fclose($fp);
                          }
                          
                      preg_match_all ($pattern$stringtoregex$matches);
                          return 
                      $matches;
                      }

                      $pattern1 "/\<img (?:.*?)src=\"(.*?)\" (?:.*?)name=\"(.*?)\" (?:.*?)\>/i";
                      $arr preg_match_all_array$pattern1"L:\www".$PHP_SELF );

                      echo 
                      "Jetzt Auswertung mit Deinem Code:\n<hr>\n";
                      echo 
                      "<pre>";
                      echo 
                      "Ich glaub jetzt kann ich alles machen ... (??):<br>&nbsp;<br>";
                      foreach (
                      $arr as $index => $inhalt) {
                         echo 
                      "url   " $arr[1][$index] . "<br>";
                         echo 
                      "name  " $arr[2][$index] . "<br>&nbsp;<br>";
                      }
                      //echo array_filter_it($arr, $callback);
                      echo "</pre>";
                      echo 
                      "\n<hr>\nEnde Auswerungs-Array";

                      echo <<< SELFCHECK
                      <p><img src="testgrafik/bild-1.gif" name="prel" width="50" height="50">&nbsp;
                      <img src="testgrafik/bild-2.gif" alt="GIF Grafik 2" name="prel" width="50" height="50">&nbsp;
                      <img src="testgrafik/bild-3.gif" alt="GIF Grafik 3" name="prel" width="50" height="50"></p>
                      SELFCHECK;
                      ?>
                      Vielen Dank!!!!! Hab es jetzt sogar halbwegs begriffen.
                      Steht jetzt nur noch mein Problem Nr.2 (mein zweiter Hinkefuss in PHP),
                      nämlich der Umgang mit regulären Ausdrücken, damit bei
                      PHP-Code:
                      $pattern1 "/\<img (?:.*?)src=\"(.*?)\" (?:.*?)name=\"(.*?)\" (?:.*?)\>/i"
                      die angenommene unbekannte Reihenfolge von src=" " und name=" " egal ist und folglich natürlich auch in der foreach()-Auswertung der Zähler gesetzt werden könnte.
                      Geht das überhaupt?

                      Kommentar


                      • #12
                        das ist schön, dass es geklappt hat. eine andere idee hatte ich nämlich auch nicht. vielleicht gibt es auch noch eine andere lösung..... wer weiss.

                        ---

                        mit den regex bin ich auch nicht so vertraut...

                        es gibt aber noch einige leute hier, die das können.... musst du leider was warten.
                        INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


                        Kommentar


                        • #13
                          Original geschrieben von Guido
                          damit bei
                          PHP-Code:
                          $pattern1 "/\<img (?:.*?)src=\"(.*?)\" (?:.*?)name=\"(.*?)\" (?:.*?)\>/i"
                          die angenommene unbekannte Reihenfolge von src=" " und name=" " egal ist und folglich natürlich auch in der foreach()-Auswertung der Zähler gesetzt werden könnte.
                          brauchst du das name-attribut denn überhaupt unbedingt?

                          wenn du mit javascript auf alle bilder in einer seite zugreifen willst, kannst du ja auch über die nummer der grafik in der seite darauf zugreifen, also
                          document.images[15].___

                          und die gesamtanzahl der images findest du über
                          document.images.lenght
                          heraus.
                          I don't believe in rebirth. Actually, I never did in my whole lives.

                          Kommentar


                          • #14
                            brauchst du das name-attribut denn überhaupt unbedingt?
                            Egal ob "name", "id" oder "my_attr", das von mir verwendete Preload-Script, das dann aufgebaut wird, benötigt einen dieser Identifier, und da das ganze nun mal schon dynamisch funzt, kann man damit auch gleich kennzeichnen, ob jenes Bild überhaupt vorgeladen werden soll.
                            Zumal diese Funktion sich ja dann eigentlich für jede TAG-"Liste", die man eventuell benötigt, verwenden lassen könnte, je nach dem, was man in $pattern verwendet.
                            Die PHP-Routine und auch das Javascript stehen ja durch das Template-System erst mal überall zur verfügung. Nun ist es aber nicht auf jeder Seite erforderlich und ratsam, die Bilder vorzuladen - bzw., wenn wir bei Tags bleiben, alle Tags auszuwerten, also kann ich diese zum Beispiel mit dem Attribut
                            Code:
                            <a href= ... my_attr="diesen_brauche_ich_schon_mal_vorher">
                            kennzeichnen.

                            Kommentar


                            • #15
                              Original geschrieben von Guido
                              Nun ist es aber nicht auf jeder Seite erforderlich und ratsam, die Bilder vorzuladen - bzw., wenn wir bei Tags bleiben, alle Tags auszuwerten, also kann ich diese zum Beispiel mit dem Attribut
                              Code:
                              <a href= ... my_attr="diesen_brauche_ich_schon_mal_vorher">
                              kennzeichnen.
                              also ich würde von so einem CMS aber wenigstens erwarten, dass es valides (x)html erzeugt - wenn du da jetzt nach eigenem gutdünken attribute erfindest, kannst du das aber vergessen.

                              ich würde das wenn schon dann eher über kommentare regeln:
                              Code:
                              <!--preload--><a href="..."><img src="..." ...></a><!--preload-->
                              bzw.
                              Code:
                              <!--no_preload--><a href="..."><img src="..." ...></a><!--no_preload-->
                              diese kannst du ja über reguläre ausdrücke genauso einfach erfassen und auswerten.
                              I don't believe in rebirth. Actually, I never did in my whole lives.

                              Kommentar

                              Lädt...
                              X