Preload von Bildordner mit PHP

[Jan-Frederik Stieler]

Hallo,
kann ich mit PHP einen Bildordner vorladen, so dass die Bilder auf der Seite im Chache verfügbar sind wenn die Bilder benötigt werden?
Also nicht wie mit JS wo ich ja jeden Pfad des Bildes einzeln angeben muß. Ich muß öfters Bilder hinzufügen und hab keine Lust die Pfade immer anzupassen.

Viele Grüße

 

[saftmeister]

Hi,

du kannst mit PHP auch JS-Code ausgeben. Wenn du so einen JS-Code bereits hast, dann solltest du ihn zeigen. Prinzipiell funktioniert das so:

<script type="text/javascript">
var bilder = new Array(
<?php
$path = "Pfad/wo/die/Bilder/liegen";
$d = dir($path);
while( ($entry = $d->read() ) )
{
  echo "'" . $path . $entry . "',";
}
?>
};
</script>

So oder so ähnlich

 

[Chumper]

Es wird dir nämlich nichts bringen, die Bilder mit PHP vorzuladen, denn das geht nicht.
Die Bilder müssen ja im Cache des Benutzers gespeichert werden und dafür bietet sich Javascript an, da es Clientseitig ausgeführt wird. während PHP Serverseitig ausgeführt wird und somit Bilder nicht vorladen kann.
Es gibt aber Dirty Tricks, wie zum Beispiel das Bild laden lassen, aber mit display:none zu verstecken, dann kannst du auch mit PHP Bilder vorladen.

Ich hoffe ich habe dich richtig verstanden, Bilder vorladen geht mit Javascript besser als mit PHP.

 

[Jan-Frederik Stieler]

Hi,
okay, wenns nur mit beidem geht dann ist das auch in Ordnung. Danke Chumper für die einfach Beschreibung des Ablaufes .
Das JS Script was ich habe ist das:

<script type="text/javascript" language="JavaScript">
<!--

var BildArray = new Array();
BildArray[0] = "..gallery/kunde01/bild01.jpg";
BildArray[1] = "..gallery/kunde01/bild02.jpg";
BildArray[2] = "..gallery/kunde01/bild03.jpg";
BildArray[3] = "..gallery/kunde01/bild04.jpg";
BildArray[4] = "..gallery/kunde02/bild01.jpg";
BildArray[5] = "..gallery/kunde02/bild02.jpg";
BildArray[6] = "..gallery/kunde02/bild03.jpg";
BildArray[7] = "..gallery/kunde02/bild04.jpg";

function Preload02()
{
  for (i = 0; i < BildArray.length; i++) {
    Bild[i] = new Image();
    Bild[i].src = BildArray[i];
  }
}


Preload02();

//-->
</script>

Nur ich kann nicht alle Bilder einpflegen da wird die min. 80 Zeilen lang oder länger. Und wenn ich noch Bilder hinzufüge wird es auch nervig.

Viele Grüße

 

[Sven Mintel]

Moin,

du wirst die Seite nicht gerade schneller und dir unter den Besuchern nicht viel Freunde machen, wenn du da ohne Rücksicht auf Verluste tonnenweise Daten in dessen Cache schiebst, welche möglicherweise überhaupt nicht benötigt werden.
Vom Traffic mal ganz zu Schweigen.

Nur ich kann nicht alle Bilder einpflegen da wird die min. 80 Zeilen lang oder länger. Und wenn ich noch Bilder hinzufüge wird es auch nervig.

Du sollst die Bilder auch nicht selbst "einpflegen", sondern dies von PHP tun lassen, wie von saftmeister vorgeschlagen.

Etwas einfachere Variante:

<script type="text/javascript">
<!--
var BildArray=<?php echo json_encode(glob('pfad/zur/gallery/kunde*/*.jpg'));?>;
//-->
</script>

...fertsch.

 

[Jan-Frederik Stieler]

Hi Sven,

du wirst die Seite nicht gerade schneller und dir unter den Besuchern nicht viel Freunde machen, wenn du da ohne Rücksicht auf Verluste tonnenweise Daten in dessen Cache schiebst, welche möglicherweise überhaupt nicht benötigt werden.

Also das ist auch der Knackpunkt an der Geschichte. Aber sogut wie alle Bilder werden schon benötigt da sich jemand sehr warscheinlich alle Arbeiten (der größte Anteil der Bilder) von uns ansehen wird.
Also die Bilder haben ca. 45 KB. Ist das eigentlich schon zuviel? ich dachte das man schon so an 50 KB rangehen kann.
Es haben sich bisher zwei Leute beschwert das ihnen das zu lange dauert und warum ich den die Bilder nicht vorlade?
Ich selbst verstehe das auch nicht so ganz weil pro Seite ist das nur jeweils ein Bild.

Gruß

 

[Sven Mintel]

Es haben sich bisher zwei Leute beschwert das ihnen das zu lange dauert und warum ich den die Bilder nicht vorlade?

Ein 50KB-Bild zu laden dauert heutzutag mit DSL nicht allzulange, evtl. haben diese 2 Leute nicht die schnellste Verbindung.

Was du allerdings machst...du lädts die Bilder sofort....das Laden der gesamten Seite wird dadurch beeinrächtigt.

Und 80 Bilder a 50KB macht dann schon 4MB, dein Server wird über die 80 Requests auch nicht sehr erfreut sein.

Wenn also vorladen, dann eher nachher....also nach dem Eintritt des onload-Events.
Dann ist die Seite selbst mit dem, was wirklich benötigt wird, fertiggeladen- und man kann an die kommenden Dinge denken, die evtl. kommen.

 

[Jan-Frederik Stieler]

Hi,
also das Script habe ich momentan nicht im aktiven Einsatz.
Es geht um diese Seite: http://www.bueroexit.de und primär um die Bilder die man unter Arbeiten finden kann.
Also wenn ich dich richtig verstehe sollte ich dir Finegr von einem Preload lassen da das sogar eher einen gegenteiligen Effekt hatt.

Viele Grüße

 

[Sven Mintel]

Also wenn ich dich richtig verstehe sollte ich dir Finegr von einem Preload lassen da das sogar eher einen gegenteiligen Effekt hatt.

Auf jeden Fall.

Es dauert in der Tat einen winzigen Moment, bis das geladen ist, du hast da aber noch genug Potential, um an der Bildgrösse zu schrauben.
Die wirklichen Bilder sind ja garnicht so gross von den Ausmaßen.... die Dateigröße ist bedingt durch die Tatsache, dass du den Hintergrund mit den Dielen mit dabei hast.

Dieser ist jedoch überall identisch.
Trenne das daher... nehme die Dielen separat als background-image, und platziere darauf die änderlichen Bilder.

 

[Dr Dau]

Hallo!

Die wirklichen Bilder sind ja garnicht so gross von den Ausmaßen.... die Dateigröße ist bedingt durch die Tatsache, dass du den Hintergrund mit den Dielen mit dabei hast.

Es gibt aber auch Bilder im "Vollformat".
Aber auch bei diesen lässt sich noch einiges rausholen.
Sowohl was die Dateigrösse angeht, als auch was die Qualität angeht.

Dein Bild: 49,9 KB gross und trotzdem "matschig".


Beispiel 1: 26,1 KB und deutlich mehr Schärfe (Stark scharfzeichnen, Kontrast +5%, Störungen entfernen, Speicherqualität 5)


Beispiel 2: 26,0 KB noch einen kleinen Tick mehr Schärfe als Beispiel 1 (Stark scharfzeichnen, Störungen entfernen, Kontrast +5%, Speicherqualität 5)


Ich habe also mit minimalen Aufwand die Qualität verbessert und trotzdem die Dateigrösse um fast 50% gesenkt.

Ich gehe davon aus dass Du noch das Original hast, welches qualitativ (hoffentlich) besser ist, als das Bild welches ich von Deiner Seite habe.
Da dürfte sich dann wohl noch mehr rausholen lassen.

Und ruhig etwas mehr Mut zur Kompression.
Eine hohe Kompression macht sich überwiegend bei starken Farbübergängen (Verlauf, Himmel, Sonnenschein, Lichtschein etc.) bemerkbar.
Das obige Bild hat aber keinen solchen Farbübergang, daher kann man die Kompression (wie man ja sieht) ruhig erhöhen.

Und falls die bessere Qualität nicht gewünscht ist habe ich das Bild nochmal unverändert mit Speicherqualität 5 neu abgespeichert.
Ergebins: 21,6 KB und qualitativ kein nennenswerter Unterschied zum runtergeladenen Bild


Gruss Dr Dau

[edit]
Ach ja.....
Ich würde die Bilder auch nicht vorladen.
So etwas lohnt sich meiner Meinung nach nur bei Bildern die wirklich länger zum laden benötigen.
Aber nicht bei solchen die ohnehin nur mit minimaler Verzögerung fertig geladen sind.

Man darf bei der ganzen Geschichte auch nicht vergessen dass die Grösse vom Browsercache i.d.R begrenzt ist.
Wenn selbiger voll ist, werden nicht benötigte Dateien gelöscht.
Es kann also schnell mal passieren dass Deine Bilder sogar mehrfach runtergeladen werden müssen, weil sie immer wieder gelöscht werden.
Ob Du dadurch dann immernoch einen Geschwindigkeitsvorteil hast, würde ich eher besweifeln.
[/edit]