Einfacher Preloader

von **Eyecatcher** am 12.05.2008, 15:19

Servus,

ich möchte gerne einen Preloader mit folgenden Funktionen entwickeln:
- Wenn die Seite geladen wird, soll ein kleines Bild erscheinen "Seite wird geladen"
- Wenn Javascript deaktiviert ist, soll nichts geschehen, also wie überlich

Ich habe mir auch schon konkrete Gedanken gemacht:
Ein Div, welches über die ganze Seite geht und das Bild beinhaltet. Das Div wird standardgemäß angezeigt. Nun wird per <body onlad=...> aufgerufen, dass das Div per CSS und über DOM versteckt wird. "Onload" wird ja erst aufgerufen, wenn die Seite vollständig geladen ist. Das würde ja soweit schon funktionieren. Nur wenn JS nun deaktiviert ist, erscheint ja immer der Ladescreen und verschwindet nicht mehr.
Wie kann man das lösen?
Gibt es einen JS- Zustand, der beim allerersten Aufruf der Seite eintrifft (also quasi vor onload)?

von **Ingo** am 12.05.2008, 23:33

Hmmm.

Vorweg: Wenn das so ginge, könnte ich ja die Ladegrafik ebenfalls per JS einblenden.
So kann ich sicher sein, dass ich onload die Grafik auch wieder entfernen kann. Ohne JS
stünde sie ja dann gar nicht da. -- Hast du das denn schon einmal ausprobiert?

Ich denke nämlich, der :devil:

steckt im Detail: Wie genau soll das Ganze ablaufen?
Angenommen, ich habe Seite A im Browser und klicke auf einen Link zu Seite B, wohlgemerkt
ein normaler Link, kein AJAX. In Moment des Klicks verliere ich die Kontrolle über das
Dokument - ich habe keine Gelegenheit mehr, eine Grafik oder ein Div anzeigen lassen. Im
einfachsten Fall hört der Browser einfach auf, die Seite A im Fenster zu aktualisieren.
Seite A ist noch da, aber reagiert nicht mehr, solange bis Seite B eingetrudelt und gerendert
ist.
Die Ladegrafiken, soweit ich sie gesehen habe, sind entweder auf das Nachladen von Bildern
begrenzt oder im Rahmen von AJAX realisiert, wenn also nur Teile eines Doks nachgeladen
werden und man nach wie vor die Kontrolle über das Dokument hat.

Ich hoffe, ich hab nix falsch verstanden, sonst steht hier ne Menge geistreicher Müll :lol:

Gruß, Ingo

von **Avedo** am 13.05.2008, 00:05

Abend!
Also ich halte einen Preloader so oder so für nicht sehr sinnvoll. Das Problem ist ganz einfach, dass viele Leute von solchen Programmen eher genervt als angetan sind. Wenn du allerdings einen Preloader schreiben willst, dann schreibe ein PHP-Programm, dass als aller erstes ein Div mit voller Bildbreite anzeigt, dass über allen anderen anzeigen, also absolut steht und deine Ladegrafik enthält. Dann gehe mit PHP in den Ordner, in dem die Bilder der Seite abgespeichert sind und durchsuche diesen Ordner und gib die Bilder nacheinander aus. Der user kann sie nicht sehen, da ja über ihnen das Div ist. Welchen Sinn hat das ganze? Ganz einfach. Wenn du Bilder erst einmal aufgerufen hast, landen sie, wie alle Inhalte aufgerufener Websiten im Cache des Browser unter History, Cronick oder einfach im Ordner Temporäre Dateien. Rufst du diese Seite wieder auf, werden die Bilder von dort geladen, wodurch die Verbindung mit dem Netz nicht genutzt werden muss und diese Dateien schneller geladen werden. Das ist meiner Meinung nach die Sinnvollste Möglichkeit. Den Hml-Code der einzelnen Dateien brauchst du nicht aufrufen , da der so oder so sehr schnell übertragen ist, für die langen Ladezeiten sind nur Bilder verantwortlich. Die Seite wird dann also sofort angezeigt.
MfG, Andy

von **cgu** am 13.05.2008, 09:18

Hi,

für die langen Ladezeiten sind nur Bilder verantwortlich

Für lange Ladezeiten können aber auch (zusätzlich) umfangreiche Datenbankabfragen und Berechnungen verantwortlich sein. Diese würden damit nicht "überbrückt". Oder kann man das damit auch lösen?

von **Eyecatcher** am 13.05.2008, 10:44

Danke ihr Beiden.

Eigentlich klappt der Preloader schon wie ich ihn beschrieben habe sehr gut (vorrausgesetzt) Javascript ist aktiviert. Da das Div als erstes hinter dem Body- Tag kommt und die Ladegrafik sehr klein ist, wird dieses als erstes angezeigt. Ist die Seite vollständig geladen, also wenn onload ausgeführt wird, verschwindet das Div und die Seite ist sofort sichtbar. Ich habe diese Lösung im FF und IE getestet, also ein 2MB- Bild eingebunden und es klappt prima. Mein einziges Problem ist jedoch, dass bei nicht aktiviertem JS dem Div nicht das hide mitgegeben werden kann. Also nocheinmal meine Frage: Gibt es irgendeine Möglichkeit/Hack, dem DIV per Javascript und VOR onload mitzuteilen, dass es angezeigt werden soll?
Wenn nicht muss ich wohl auf Avedos Möglichkeit zurückgreifen

von **Avedo** am 13.05.2008, 12:43

Ich wüsste keine.

@cgu: Nein Scripte können damit nicht vorgeladen werden, aber das können sie meiner Meinung nach so oder so nicht. Du kannst höchstens nach eingebundenen Scripten suchen, die Ausgabe puffern und dann direkt weitergeben. Im Prinzip wird dann nur HTML-Code weitergereicht, was, wie gesagt, nicht wirklich für eine starke Performance-Belastung sorgt.
MfG, Andy

von **cgu** am 13.05.2008, 13:26

Mir hätte jetzt eine Lösung vorgeschwebt, in der die Seite einfach im Hintergrund komplett geladen und dann erst eingeblendet wird (so wie Eyecatcher den Ansatz bereits hat). Dann wären alle Bilder im Cache, alle Berechnungen ausgeführt und alle Positionierungen gemacht.

Jedoch muss es mit und ohne JS funktionieren (Ohne JS = Preloader wird einfach nur nicht angezeigt).

von **Eyecatcher** am 13.05.2008, 13:31

cgu genau so habe ich es jetzt schon fertig, nur Problem ist, dass wenn JS deaktiviert ist, der Preloader nicht verschwindet. Und anscheinend gibt es keine Möglichkeit dies zu umgehen.

Also dann komm ich nochmal auf deine Möglichkeit zurück Avedo:

Ich erzeuge also beim Laden der Seite zwei Divs. In das eine kommt per

Code: Alles auswählen: position:fixed; width:100%; height:100%; top:0px; left:0px;

das Ladebild rein. In das andere Div, welches darunter liegt, lass ich per PHP alle benötigten Bilder auslesen und per <img> einmal aufrufen, damit sie in den Cache übergehn. Soweit so gut. Nun versteh ich nur nicht, wie ich überprüfen soll, wann die Bilder fertig geladen sind und ich die beiden Divs verstecken kann. Dafür benötige ich dann ja schon wieder Javascript?? Dann ist das doch quasi das selbe (Problem) wie bei meiner Lösung.

von **Avedo** am 13.05.2008, 13:32

Ich bin ja voll daneben. Es geht ganz einfach. Ich schreibe ja momentan eine HTTP-Klasse, mit der man Siten via HTTP anfordern kann. Du kannst also die Site vor ihrem Aufruf einfach anfordern und fertig. Dann liegt sie bereits im Cache und du kannst sie später schneller ausgeben.
MfG, Andy

von **Avedo** am 13.05.2008, 13:34

Also du versteckst die Bilder garnicht. Dieser Preloader ist eine externe Datei, die dann, wenn die Bilder geladen sind via header() auf die Homepage weiterleitet. Das hat den Vorteil, dass du den Preloader nur einmal beim Betreten der Seite siehst und dann nicht nochmal.
MfG, Andy

von **Eyecatcher** am 13.05.2008, 13:48

Äh ok Danke,
ich steig jetzt nicht ganz durch, da du zwei Posts verfasst hast.
Welchen Weg bevorzugst du jetzt?
Mit einer HTTP- Klasse zu arbeiten (wovon ich leider noch gar keine Ahnung hab

) oder die Seite weiterzuleiten.
Bei der Methode mit dem header steig ich auch noch nicht ganz durch. Man kann ja keine Header mehr mitgeben wenn man schon eine Ausgabe durchgeführt hat. Aber genau das ist doch der Fall, wenn man die Bilder vorher hat aufrufen lassen?

von **Eyecatcher** am 14.05.2008, 18:03

So, ich habe den Preloader nun doch mit meiner Javascript Methode hinbekommen, war eigentlich ganz einfach.
Habe nun einen Div Layer hinter dem Body mit einer ID. Dann lad ich im Head eine JS- Datei ein. In dieser Steht, dass sie in den Kopf des Dokuments den Link zur CSS- Datei für den Preloader schreiben soll. Also wird nur wenn JS aktiviert ist, dieser aktiv. Dann gibt es noch eine Funktion, welcher über body onload aufgerufen wird und dem Div Layer des Preloaders style.visibility = "hidden" mitgibt. Scheint so alles perfekt zu klappen

Einfacher Preloader

Einfacher Preloader

Re: Einfacher Preloader

Re: Einfacher Preloader

Re: Einfacher Preloader

Re: Einfacher Preloader

Re: Einfacher Preloader

Re: Einfacher Preloader

Re: Einfacher Preloader

Re: Einfacher Preloader

Re: Einfacher Preloader

Re: Einfacher Preloader

Re: Einfacher Preloader

Wer ist online?