[PHP/HTML] Grafiken vorladen - Ideen gesucht

[Balu der Bär]

Moin,

ich habe auf meiner Webseite ein paar größere Grafiken, zum Teil über 100 KB. Jetzt würde ich gerne auf der Startseite eine Art Preloader einbinden, welcher alle Grafiken fertig läd und erst nach Abschluss des Ladens auf die eigentliche Webseite weiterleitet. Jetzt gibt es da fertige Lösungen in Flash oder Java-Applets, dass sind aber Sachen auf die ich gern verzichten würde. Jetzt stellt sich mir bloß die Frage, wie man so etwas am besten realisieren kann. Ich könnte die Bilder ja einfach auf der Preloader-Seite versteckt laden, Problem ist nur das ich nicht weiß wie ich herausbekomme ob die Bilder nun schon komplett geladen sind um auf die Webseite weiterzuleiten. Am genialsten wäre es natürlich noch mit einer kleinen Fortschrittsanzeige des Ladeprozesses. *g*

Irgendwelche Ideen? Danke euch.

[jfheins]

Du könntest image-objekte in javascript erstellen. Dann kannst du, abhängig, von den bereits gelandenen Image-objekten, eine Fortschritsleiste machen. Bei wenigen Bildern wird die dann aber eider nicht flüssig laufen, sondern in so vielen schriten, wie du halt bilder hast ...

Vielleicht geht's auch mit AJAX - is ja grad modern ;)

[Balu der Bär]

Moin Heins,

was meinst du denn mit Image-Objekte erstellen? Ich versuche grad sowas in der Art:

Code:

  for (i = 0; i < document.images.length; ++i) {
    if (document.images[i].complete == true) 
     ....

So sollte es mir, wenn es klappt wie ich es mir vorstelle, möglich sein in einer Schleife anzufragen ob alle Bilder geladen sind, und wenn ja weiterzuleiten. Problem ist nur, dass ich nicht weiß wie sich das auf den Clienten auswirkt wenn z.B. bei einem Modemuser 15 Minuten lang die Schleife durchläuft... :gruebel:

Und AJAX, hm, hab ich leider überhaupt keine Ahnung von. :-(

[alcaeus]

Zitat:

Zitat von jfheins

Vielleicht geht's auch mit AJAX - is ja grad modern ;)

Ja, XNA ist auch grad im kommen, deswegen versuch ich es aber auch nicht in eine Website einzubauen.
Das ist nicht AJAX, sondern nur JavaScript:

Code:

var img = new Image();
img.src = 'http://deineurl.tld/deinpfad.png';

Die Frage dabei ist natuerlich, hast du wirklich so viele Bilder? Kannst du mal ein Beispiel von der Seite zeigen? Bei vielen Dingen ist es einfach nicht noetig, einen Preload zu machen, weil der Benutzer nicht unbedingt das Bild aufruft. Und wenn du deine Website entsprechend konstruierst, hast du auch kein Problem mit "springendem" Content. Dazu gehoert u.a., width und height (als property oder style-Attribut) anzugeben.

Greetz
alcaeus

[Balu der Bär]

Zitat:

Zitat von alcaeus

Die Frage dabei ist natuerlich, hast du wirklich so viele Bilder?

Nein, dass gewiss nicht. Es sind 3 Bilder mit insgesamt knapp 300 KB (nicht sonderlich stark komprimiert, da die hohe Bildqualität in jedem Fall erhalten bleiben muss), die der User auf jeden Fall aufruft, da sie gleich auf der richtigen Startseite liegen. ;)

[alcaeus]

Zitat:

Zitat von Balu der Bär

Zitat:

Zitat von alcaeus

Die Frage dabei ist natuerlich, hast du wirklich so viele Bilder?

Nein, dass gewiss nicht. Es sind 3 Bilder mit insgesamt knapp 300 KB (nicht sonderlich stark komprimiert, da die hohe Bildqualität in jedem Fall erhalten bleiben muss), die der User auf jeden Fall aufruft, da sie gleich auf der richtigen Startseite liegen. ;)

Schonmal was in Richtung verlustfreie Komprimierung (png) versucht? ;)

Greetz
alcaeus

[Balu der Bär]

Zitat:

Zitat von alcaeus

Schonmal was in Richtung verlustfreie Komprimierung (png) versucht? ;)

Ja, leider mit wenig Erfolg. :P

Melfin hat mir diesen Link zukommen lassen, dass sieht recht positiv aus, werde das mal probieren. :-)

[Meflin]

Und damit sich die DP-User nicht alle da anmelden müssen, gibts hier auch den Anhang aus dem Thread :mrgreen:

[DataCool]

Hi,

der Download funktioniert leider nicht :-(

Greetz DataCool

[Balu der Bär]

Meflin hat die Datei doch im vorherigen Post hier angehangen und dieser Download geht auch.

Leider klappt das ganze nicht wie ich mir das vorgestellt habe, ich werde mich also nach einer anderen Lösung umgucken...