Ladescreen für HTML?

[Jormungand]

Huhu alle,
in meinem HTML/CSS-Projekt wird gleich auf der ersten Seite ein gewaltiges Bild geladen. Es handelt sich um einen freigestellten Baum, durch dessen Geäst ein Panoramaslider zu sehen ist (=> der Baum muss also transparent sein).

Um die Dateigröße zu reduzieren habe ich schon das gute-Qualität-PNG gegen ein net-so-gute-Qualität-GIF getauscht, aber der Seitenaufbau braucht trotzdem ewig lang. :hmpf:

Meine jetzige Idee ist, eine Ladescreen als Introseite zu basteln, die die Bilder der eigentlichen Seite vorläd. Der Besucher soll erst die Seite ansteuern können, wenn alles fertig geladen ist.

Würd mich sehr freuen, wenn jemand Tipps hat, wie ich die realisieren könnte. Auch Alternativen, wie ich die Ladezeit sonst verkürzen kann sind willkommen. Nur der Baum muss bleiben.

Gruß
Jormungand

 

[oxygen]

AW: Ladescreen für HTML?

machs doch wie in der guten alten modemzeit

bild 1x1 vorladen - sieht der besucher ja nicht
und dann kann der besucher ja weitergeleitet (refresh) werden zu der seite - wo dein baum steht

 

[gimp_freak]

AW: Ladescreen für HTML?

also ladezeit bei bildern kommt in der regel daher dass der server browser oder wer auch immer das bild skalieren muss! wenn man also ein bild nimmt das nicht mehr skaliert werden muss gibt es praktisch keine ladezeit.
also skalier das den baum doc heinfach auf die größe die du brauchst! (Beispiel das bild soll im browser 100X100 px groß sein dann speicher das bild auf dem server als 100X100 px großes bild)

 

[Jormungand]

AW: Ladescreen für HTML?

Der Tipp mit dem Bild auf 1x1 Pixel ist super! Danke oxygen. Ich hätte jetzt mit javascript preload angefangen.
Wenn ich jetzt noch ne Möglichkeit hätte einen Link zu machen, der erst eingeblendet wird, wenn alles geladen ist, wär ich glücklich.
Es würde ein animiertes GIF mit drehendem Rädchen, Sanduhr oder einem sonstigen Symbol für "Loading..." ablaufen und anschließend von einem Button "weiter" bedeckt werden. Ist sowas in HTML/CSS möglich?

Danke, gimp_freak. Das Bild wird schon mit 100% Skalierung dargestellt, ist aber ganze 1230x1143 Pixel groß. Ich hab vom GIF sogar schon die Farben reduziert, aber trotzdem ist die Datei noch riesig. Wenn jetzt noch der Panoramaslider dazukommt, klicken die Leute weg, wenn ich keine Anmerkung/Intro davorschalte...

 

[stroyer]

AW: Ladescreen für HTML?

Du kannst onLoad vom Body, document oder window verwenden. Das wird erst dann aufgerufen, wenn alles, also auch das Bild fertig geladen ist.

 

[Jormungand]

AW: Ladescreen für HTML?

Danke stroyer, vom onLoad im body-tag hab ich schon gehört, aber was du mit document und window meinst, hab ich nicht ganz verstanden.

Ich versuch mein Ziel nochmal aufzuführen:

1. Für meine Introseite muss möglichst schnell ein Willkommenstext gezeigt werden und ein animiertes Gif, das zeigt, dass der Rechner nochwas tut, sowie eine Anmerkung bitte zu warten.
2. Erst wenn das alles steht, würden die Grafiken der folgenden Seite geladen werden (onLoad) und
3. erst wenn sämtliche folgende Gafiken fertig geladen wären, würde das animierte GIF gegen einen Weiter-Button getauscht werden (so in der Art...).

 

[stroyer]

AW: Ladescreen für HTML?

Oder du lädst die ganze Seite und währenddessen hast du oben drüber ein 100%x100% DIV liegen, dass du im onload vom body unsichtbar machst.

 

[Jormungand]

AW: Ladescreen für HTML?

Sorry, dass ich erst jetzt wieder schreibe.
Auf jeden Fall danke mal für deinen Rat. Wenn ich dich recht verstehe bedeckt ein Container die gesamte Fläche, während im Hintergrund die Seite per onLoad aufgebaut wird.
Ist die Seite erst geladen, kann ich auf Klick den drüberliegenden Container unsichtbar machen und ich habe die Seite aus dem Hintergrund?
Kann ich dann noch navigieren oder liegt da dann der unsichtbare Container im Weg?

 

[stroyer]

AW: Ladescreen für HTML?

Ich habe gedacht, dass standardmäßig der Container die Seite bedeckt und im onLoad Ereigniss versteckt wird, so dass dann der Rest sichtbar wird.

 

[Jormungand]

AW: Ladescreen für HTML?

Die Introseite wird jetzt nicht realisiert. Der Besucher muss warten, bis die Seite aufgebaut ist.
Das Laden dauert zwar etwas länger (laut Pingdom Tools müssen 450 KB für die Startseite durch die Leitung), aber es ist nicht zu ändern.

Danke nochmal an alle, die geholfen haben.
Gruß
Jormungand

 

[Wackelpeter]

AW: Ladescreen für HTML?

Einen Ladefortschrittsbalnke bekommst du beispielsweise mit Ajax hin

LG