Seite erst laden, dann anzeigen?

[caro84]

Hi,

ich habe eine Homepage, die auf eine sehr umfangreiche Datenbank zugreift. Daher läd die Seite relativ lang. Das ist eigentlich kein Problem.
Aber gibt es irgendwie die Möglichkeit, die gesamte Seite erst zu laden und sie dann komplett anzuzeigen?
Anders: Die Möglichkeit habe ich schon gesehen.. Aber wie setze ich das um?

Am liebsten wäre es mir, wenn die Seite zunächst einfach leer ist und eine Fortschrittsbalken oder so angezeigt wird (oder einfach nur "Seite wird geladen"), bis dann die Seite auf einen Schwung angezeigt wird.

Hat jemand eine Lösung?

Falls das technisch nicht so umsetzbar ist, wie ich mir das denke, wäre auch folgende Alternative denkbar:

Wenn ein Link angeklickt wird kommt immer einer Seite mit dem Inhalt "Seite wird geladen", die nach x Sekunden auf die Seite weiterleitet, die bereits im Hintergrund geladen wurde.
Aber auch hier weiß ich nicht ob/wie das umsetzbar ist. Die Lösung ist auch nicht ganz so galant..

Freue mich auf eure Vorschläge und Ideen
Caro

[Beat]

Freue mich auf eure Vorschläge und Ideen

Warum suchst du nach destruktiver Kosmetik, wo du doch deine Energie auf das Problem konzentrieren solltest?

mfg Beat

[caro84]

Warum suchst du nach destruktiver Kosmetik, wo du doch deine Energie auf das Problem konzentrieren solltest?

Danke für diesen Konstruktiven Hinweis. Ich nehme an du meinst damit, ich solle die Ladezeiten verkürzen.
Wenn dem so ist: Daran arbeite ich, ist aber ein komplett anderes Arbeitsfeld als das, wonach ich hier gefragt habe. Ich suche hier nach Kosmetik, das ist richtig. Soll ja auch nach was aussehen..
Und wie gesagt, es wird auf sehr viele sehr große Tabellen zugegriffen und da kann ich leider die Ladezeit nicht kürzen.

[Beat]

Warum suchst du nach destruktiver Kosmetik, wo du doch deine Energie auf das Problem konzentrieren solltest?

Danke für diesen Konstruktiven Hinweis. Ich nehme an du meinst damit, ich solle die Ladezeiten verkürzen.

Eventuell die Lademenge und die Laufzeit deines programmes.

Wenn dem so ist: Daran arbeite ich, ist aber ein komplett anderes Arbeitsfeld als das, wonach ich hier gefragt habe. Ich suche hier nach Kosmetik, das ist richtig. Soll ja auch nach was aussehen..

"Bitte warten" war noch nie eine gute Visitenkarte.

Und wie gesagt, es wird auf sehr viele sehr große Tabellen zugegriffen und da kann ich leider die Ladezeit nicht kürzen.

Dann halt nochmals:
Bereinige dein Problem auf dem Server, statt das Problem dem User aufzuhalsen.

Du hast wahrscheinlich sehr aufgeblähten HTML Code, ungünstige Datenbankabfragen, oder lieferst schlicht zu grosse Ergebnisseiten zurück.

mfg Beat

[caro84]

Du hast wahrscheinlich sehr aufgeblähten HTML Code, ungünstige Datenbankabfragen, oder lieferst schlicht zu grosse Ergebnisseiten zurück.

Okay. Gehen wir mal davon aus, dass dem nicht so ist und sich nichts mehr ändern lässt (auch wenn dem nicht so ist).

"Bitte warten" war noch nie eine gute Visitenkarte.

Und weiterhin, dass mir das egal wäre.

Ich habe hier lediglich gefragt, ob so etwas technisch möglich ist und wie man es umsetzen könnte. Ich habe nicht danach gefragt, ob das für den Nutzer toll oder konstruktiv wäre.

Ich programmiere für eine sehr spezielle Zielgruppe und diese möchte nunmal, dass der Ladevorgang nicht angezeigt wird, sondern erst die komplett geladene Seite. Ob das sinnvoll ist ist denen egal, also auch mir.

Also, wer auch immer mir dabei helfen kann einen Ansatz zu finden, dies umzusetzen: Danke

Alle, die den Ansatz nicht sinnvoll finden: Ich stimme euch zu (also auch dir Beat), aber ich tue nur das, worum ich gebeten wurde.

[Beat]

Alle, die den Ansatz nicht sinnvoll finden: Ich stimme euch zu (also auch dir Beat), aber ich tue nur das, worum ich gebeten wurde.

Da sind wir verschieden. ich tue was ich verantworten kann.

Dein Weg geht über JS und den onlaod handler. Du brauchst einen Layer, dessen display Wert du von block auf none setzt, absolut oder fix positioniert.

mfg Beat

[Gunther]

Hi!

Ich programmiere für eine sehr spezielle Zielgruppe und diese möchte nunmal, dass der Ladevorgang nicht angezeigt wird, sondern erst die komplett geladene Seite. Ob das sinnvoll ist ist denen egal, also auch mir.

Also, wer auch immer mir dabei helfen kann einen Ansatz zu finden, dies umzusetzen: Danke

Alle, die den Ansatz nicht sinnvoll finden: Ich stimme euch zu (also auch dir Beat), aber ich tue nur das, worum ich gebeten wurde.

Und wenn dich jemand bittet von der Brücke zu springen, dann machst du das auch!?

Ehrlich gesagt halte ich diese immer wieder anzutreffende "Rechtfertigung" warum man unsinnige Dinge tut, obwohl man angeblich weiß, dass sie unsinnig sind, für völlig daneben!

Sorgst du denn auch dafür, dass deine Seite(n) nicht in den Ergebnisseiten von Suchmaschinen auftauchen? Deine Seite(n) nur dieser "speziellen Zielgruppe" zugänglich sind?

Denn wenn nicht, solltest du dein Vorhaben nochmal gründlich überdenken - danke!

Gruß Gunther

[molily]

Ich programmiere für eine sehr spezielle Zielgruppe und diese möchte nunmal, dass der Ladevorgang nicht angezeigt wird, sondern erst die komplett geladene Seite. Ob das sinnvoll ist ist denen egal, also auch mir.

Wie gesagt:

<p>Bitte warten, Seite wird geladen...</p>

<div id="inhalt" style="visibility:hidden">
... Hauptinhalt ...
</div>

<script type="text/javascript">
window.onload = function () {
   document.getElementById("inhalt").style.visibility = "hidden";
};
</script>

Ich würde mit visibility arbeiten, weil damit intern schon die Blöcke gelayoutet werden.

Alternativ kannst du auch erstmal ohne onload arbeiten und einfach versuchen, ein script-Element direkt hinter dem Hauptinhalt zu positionieren. Darin kannst du direkt document.getElementById("inhalt").style.visibility = "hidden"; ausführen. Das Script wird ausgeführt, wenn der Browser den Hauptinhalt empfangen und das DOM daraus gebaut hat. Ob es dann schon auf dem Bildschirm erscheinen würde, wenn es nicht versteckt wäre, musst du prüfen. Das load-Ereignis tritt u.U. viel später ein und bringt u.U. unnötige Wartezeit mit sich. Informiere dich auch einmal über den Event DOMContentLoaded.

Mathias

[molily]

document.getElementById("inhalt").style.visibility = "hidden";

Hier muss natürlich "visible" hin.

[Nick]

Falls Du zu Deinem Problem eine angemessene Lösung findest, würde ich gerne den Weg kenne lernen, da auch ich so ein Problem habe.
Bin da aber auch nicht wirklich zu einem Ergebnis gekommen.

Viel Erfolg weiterhin und Gruß

Nick

[Felix Riesterer]

Lieber Nick,

eine sinnfreie Lösung wäre solch eine:

...  
<body>  
<div id="ladeanzeige"><h1>Seite läd...</h1><p>Bitte warten Sie, bis Sie etwas sehen dürfen.</p></div>  
<div id="seite" style="display:none;">  
... hier steht der eigentliche Inhalt ...  
</div>  
</body>

Per JavaScript stellt man dann eine Funktion ein, die wartet, bis die Seite komplett geladen hat, um dann aktiv zu werden (Beispiel). Diese Funktion entfernt zuerst das DIV "ladeanzeige" und setzt dann das style-Attribut des DIVs "seite" auf style="", um die Darstellung wieder zu aktivieren.

Wo ist das Problem?

Liebe Grüße,

Felix Riesterer.

[Nick]

Lieber Felix, ;)

Wo das Problem ist?
Ganz einfach:
Du bist vom Wissen her wesentlich weiter als ich und offensichtlich auch als Caro.

Vondaher erlaube ich mir mal in unser beidernamen ein kräftiges Dankeschön an Dich weiterzugeben. Denn jetzt haben wir auch das Wissen so offensichtlich einfache Dinge umzusetzen.

Also DANKE !!

Und besten Gruß

Nick

[Steel]

Lieber Nick,

Wo das Problem ist?
Ganz einfach:
Du bist vom Wissen her wesentlich weiter als ich und offensichtlich auch als Caro.

Nix, was man nach ein paar Minuten SELFHTML und ein klein wenig Logik nicht selbst haette 'erfinden' koennen.

Vondaher erlaube ich mir mal in unser beidernamen ein kräftiges Dankeschön an Dich weiterzugeben. Denn jetzt haben wir auch das Wissen so offensichtlich einfache Dinge umzusetzen.

Einfach aber nicht unbedingt erstrebenswert. Du wirst mich mit so einer Seite immer wieder davonjagen, weil ich nie was zu sehen bekomme. Je nach Browser, den ich nutze.

[Kai345]

[latex]Mae  govannen![/latex]

<div id="seite" style="display:none;">

Wo ist das Problem?

Der Inhalt wird ohne JS niemals angezeigt.

Dann doch lieber für solche speziellen Fälle auf "unobstrusive" verzichten und

<div id="seite">  
  <!-- Inhalt -->  
</div>  
<script type="text/javascript">  
document.getElementById("seite").style.display = "none";  
<script>

benutzen.

Cü,

Kai

[Steel]

[latex]Mae  govannen![/latex]

<div id="seite" style="display:none;">

Wo ist das Problem?

Der Inhalt wird ohne JS niemals angezeigt.

Dann doch lieber für solche speziellen Fälle auf "unobstrusive" verzichten und

<div id="seite">

<!-- Inhalt -->
</div>
<script type="text/javascript">
document.getElementById("seite").style.display = "none";
<script>

>   
  
Das funktioinert aber nicht, wenn z.b. eine riesen Tabelle geladen werden soll. Dann verschwindet die Tabelle in dem Augenblick, wo sie eigentlich angezeigt werden sollte. Dein Konstrukt funktioniert nur bei nachgeladenen Inhalten wie z.B. vielen oder grossen Bildern. Aber auch da ist schonmal kurz die Seite zu sehen, bevor sie verschwindet. Das ist aber scheinbar nicht gewuenscht.  
  
Bei diesem Problem gibt es IMHO nur Javascriptloesungen. Eine Alternative zu Felix' Ansatz waere hier evtl. Ajax.  

-- 
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."  
      - T. Pratchett

[Kai345]

[latex]Mae  govannen![/latex]

Das funktioinert aber nicht, wenn z.b. eine riesen Tabelle geladen werden soll. Dann verschwindet die Tabelle in dem Augenblick, wo sie eigentlich angezeigt werden sollte. Dein Konstrukt funktioniert nur bei nachgeladenen Inhalten wie z.B. vielen oder grossen Bildern. Aber auch da ist schonmal kurz die Seite zu sehen, bevor sie verschwindet. Das ist aber scheinbar nicht gewuenscht.

Grmpf. Das ist dann narürlich etwas .. blöd.

Bei diesem Problem gibt es IMHO nur Javascriptloesungen. Eine Alternative zu Felix' Ansatz waere hier evtl. Ajax.

Sieht in diesm Fall (viele Daten) so aus.

Cü,

Kai

[Beat]

Wo ist das Problem?

Der Inhalt wird ohne JS niemals angezeigt.
Dann doch lieber für solche speziellen Fälle auf "unobstrusive" verzichten und

<div id="seite">

<!-- Inhalt -->
</div>
<script type="text/javascript">
document.getElementById("seite").style.display = "none";
<script>

>   
> benutzen.  
  
Schön. Jetzt musst du die ganze Seite laden, bis deine unobtrusive Variante überhaupt gelesen und abgearbeitet wird.  
  
Dann doch lieber das Problem an der Wurzel behandeln.  
  
mfg Beat

-- 
Woran ich arbeite:  
[X-Torah](http://www.elcappuccino.ch/cgi/tok.pl?extern=1-pub-com3306-1)  

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  

[Felix Riesterer]

Lieber Beat,

Schön. Jetzt musst du die ganze Seite laden, bis deine unobtrusive Variante überhaupt gelesen und abgearbeitet wird.

dann vielleicht ein Vorschlag, der in eine völlig andere Richtung geht:

Im <head> ein Script definieren, das zwei Dinge tut:
1.) per document.write ein extra <style>-Element definieren, welches mit hoher Spezifität das fragliche <div> auf display:none setzt
2.) Einen Eventhandler (window.onload) definieren, der dieses extra <style>-Element nach dem Laden wieder entfernt.

Wie findest Du diese Lösung?

Liebe Grüße,

Felix Riesterer.

[Steel]

Moinsen!

dann vielleicht ein Vorschlag, der in eine völlig andere Richtung geht:

Im <head> ein Script definieren, das zwei Dinge tut:
1.) per document.write ein extra <style>-Element definieren, welches mit hoher Spezifität das fragliche <div> auf display:none setzt
2.) Einen Eventhandler (window.onload) definieren, der dieses extra <style>-Element nach dem Laden wieder entfernt.

Wie findest Du diese Lösung?

Aua. Irgendwie is mir grad gar nicht gut, ich haett das halbe Haenchen nicht essen sollen...

[Kai345]

[latex]Mae  govannen![/latex]

<div id="seite">

<!-- Inhalt -->
</div>
<script type="text/javascript">
document.getElementById("seite").style.display = "none";
<script>

  

> Schön. Jetzt musst du die ganze Seite laden, bis deine unobtrusive Variante überhaupt gelesen und abgearbeitet wird.  
  
Nein. Wenn der Script-Block direkt hinter dem Element steht, wird es sofort abgearbeitet.  
  

> Dann doch lieber das Problem an der Wurzel behandeln.  
  
Zahnarzt?  
  
Cü,  
  
Kai

-- 
Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul  
  
selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?  
[Mein Selfhtml-Kram](http://www.kaichen.in/selfhtml/)

[Felix Riesterer]

Lieber Kai345,

<div id="seite">

<!-- Inhalt -->
</div>
<script type="text/javascript">
document.getElementById("seite").style.display = "none";
<script>

>   
> Nein. Wenn der Script-Block direkt hinter dem Element steht, wird es sofort abgearbeitet.  
  
bis aber der Script-Block abgearbeitet werden kann, muss dieses Element erst zu Ende geladen sein, welches aber ja laut OP eine sehr umfangreiche Geschichte ist, sodass während dieses Vorgangs eben \_nichts\_ \_davon\_ angezeigt werden soll. Der Bereich soll ja so schnell als möglich unsichtbar werden, was aber in dieser Konstellation gerade nicht gelingt.  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)

[Kai345]

[latex]Mae  govannen![/latex]

Lieber Kai345,

<div id="seite">

<!-- Inhalt -->
</div>
<script type="text/javascript">
document.getElementById("seite").style.display = "none";
<script>

> >   
> > Nein. Wenn der Script-Block direkt hinter dem Element steht, wird es sofort abgearbeitet.  
>   
> bis aber der Script-Block abgearbeitet werden kann, muss dieses Element erst zu Ende geladen sein, welches aber ja laut OP eine sehr umfangreiche Geschichte ist, sodass während dieses Vorgangs eben \_nichts\_ \_davon\_ angezeigt werden soll. Der Bereich soll ja so schnell als möglich unsichtbar werden, was aber in dieser Konstellation gerade nicht gelingt.  
  
Ja. Aber: Ich bezog mich hier \_nur\_ auf die von mir (als einziges) zitierte Aussage  
  

>> Schön. Jetzt musst du die ganze Seite laden, bis deine unobtrusive Variante überhaupt gelesen und abgearbeitet wird.  
  
die in dieser Form im Bezug zu meinem Code nicht korrekt ist (wobei es natürlich quasi keinen \_praktischen\_ Unterschied mehr gibt, wenn nach diesem umfangreichen Inhaltselement kaum mehr weiterer Inhalt kommt.)  
  
Cü,  
  
Kai

-- 
Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul  
  
selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?  
[Mein Selfhtml-Kram](http://www.kaichen.in/selfhtml/)

[Felix Riesterer]

Lieber Kai345,

<div id="seite" style="display:none;">

Der Inhalt wird ohne JS niemals angezeigt.

richtig. Daher nannte ich meinen Ansatz auch "sinnfrei".

Liebe Grüße,

Felix Riesterer.

[molily]

ich habe eine Homepage, die auf eine sehr umfangreiche Datenbank zugreift. Daher läd die Seite relativ lang. Das ist eigentlich kein Problem.
Aber gibt es irgendwie die Möglichkeit, die gesamte Seite erst zu laden und sie dann komplett anzuzeigen?

Wo liegt genau das Problem? Was meinst du mit Ladezeit?

1. Das serverseitige Programm braucht lange zur Generierung des HTML-Dokuments.
2. Das HTML-Dokument ist einfach groß, braucht also lange in der Übertragung zum Client. Das Dokument wird daher nur stückchenweise im Browser angezeigt.

An Fall 1 kannst du clientseitig mit JavaScript nicht drehen, an Fall 2 wie gesagt auch nur kosmetisch.

Fall 1 kannst du nur mit verbesserten Serverprogrammen, Datenbank-Optimierung, Query-Caches und wasweißich bekämpfen.
Zu Fall 2 solltest du die Architektur in Frage stellen: Warum müssen soviele Daten zum Client übertragen werden? Ist HTML das angemessene Format dazu? Was ist mit JSON oder XML, die clientseitig transformiert werden? Oder ist das letztlich nicht schneller? Kannst du den HTML-Code verkleinern und komprimieren (GZip)?

Wenn ein Link angeklickt wird kommt immer einer Seite mit dem Inhalt "Seite wird geladen", die nach x Sekunden auf die Seite weiterleitet, die bereits im Hintergrund geladen wurde.

Das löst man mit Ajax (XMLHttpRequest).
Allerdings deckt XMLHttpRequest nur den Serverrequest und das Bereitstellen der Serverantwort als JavaScript-String ab.
Jetzt musst du die Serverantwort noch ins Dokument einmontieren. Wenn der Server mit einem HTML-Schnipsel antwortet, kannst du es z.B. mit innerHTML ins Dokument schreiben. Das dauert aber wieder seine Zeit, vor allem, wenn der String riesig ist. Der Browser muss den Code parsen und rendern. Mit einem Ladebalken, der vom Starts des Requests bis zum vollständigen Eintreffen der Serverantwort angezeigt wird, deckst du auch nicht die gesamte tatsächliche »Ladezeit« ab.

Mathias