Dynamischer Grafik-Preload mit PHP & JS

**wahsaga** · 14.03.2003, 15:13

Re: Dynamischer Grafik-Preload mit PHP & 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

**dirk** · 14.03.2003, 15:15

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

**Abraxax** · 14.03.2003, 16:41

aber mal ne ganz andere frage dazu...

warum überhaupt preloaden???

**Guido** · 14.03.2003, 17:22

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.

**Guido** · 17.03.2003, 14:20

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; $i< count($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;

?>

**Guido** · 17.03.2003, 15:34

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.

**Abraxax** · 17.03.2003, 16:43

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?

**Guido** · 17.03.2003, 17:27

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] . " ...";

  }

}

**Abraxax** · 17.03.2003, 17:34

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?

**Guido** · 17.03.2003, 18:24

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?

**Abraxax** · 17.03.2003, 18:28

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.

**wahsaga** · 17.03.2003, 21:27

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.

**Guido** · 18.03.2003, 10:06

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.

**wahsaga** · 18.03.2003, 10:12

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.

Dynamischer Grafik-Preload mit PHP & JS