Archivlink: javarea.de Forum > JavaScript > Bild anzeigen solange die Seite geladen wird
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Bild anzeigen solange die Seite geladen wird
Pages: [1]
| geschrieben von Gordon am 23.02.2009 - 13:34 |
Hallo liebe Profigemeinde!
Habe da mal eine Frage. Auf einigen meiner Seite habe ich komplizierte und umfangreiche Vergleichs-Tools drauf. Das heißt, es kann manchmal 10 Sekunden oder mehr dauern, bis der Besucher seine Auswertung erhält.
Das der Besucher nicht gleich verschwindet, wollte ich fragen, ob es ein JS gibt, welches ein Bild einblendet, bis die Seite vollständig geladen ist.
Das Bild habe ich beigefügt. Es ist ein sich drehender Kreis.
Schon mal besten Dank! |
| geschrieben von Klaush am 23.02.2009 - 15:24 |
So einfach ist das dann doch nicht. Wenn der Browser die Seite geladen hat, bedeutet es nicht das die Anwendungen (Tools) ebenfalls komplett geladen sind.
Für eine reine HTML Seite geht das halbwegs.
Beispiel:
Im Kopf der Seite das Script initialisieren und einen Text einblenden "Seite wird geladen .... bitte warten!" und am Fuss des Quelltextes den Text ausblenden, dann sollte deine Seite eigentlich geladen sein. Was jetzt sein kann, ist dass deine Tools noch am laden sind. Das Ganze sollte natürlich als JS oder aber als Flash dargestellt werden.
Beispiel aus dem Archiv:
http://javarea.de/index.php3?openca....amp;id=238
Für solche Zwecke bietet sich eigentlich eine Thread engine an. Die wertet in der Regel verschiedene Ereignisse aus und kann genau sagen wann das Laden wirklich beendet ist da mehrer multiple threads gleichzeitig laufen. In deinem Fall aber doch eher zu viel des Guten. |
| geschrieben von Gordon am 23.02.2009 - 15:27 |
Hi Klaush,
danke für die Hinweise. Also die Seite ist erst dann vollständig geladen, wenn auch die Tools fertig sind. Demnach dürfte das kein Problem darstellen.
Habe schon lange gegoogelt. wo ich so ein Script herbekomme. Bin leider nicht fündig geworden. Kennst du da ein, oder hast du da ein Lösungsansatz?
Herzliche Grüße |
| geschrieben von Gordon am 23.02.2009 - 15:29 |
| Ach sorry, hatte den link übersehen... Also ist es doch das Script... Ich probiere es mal eben aus... |
| geschrieben von Gordon am 23.02.2009 - 17:49 |
Hallo! Für alle die die gleiche Frage haben hier eine Lösung mittels JS:
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
| <head><script type="text/javascript">
<!--
function changeContent(what){
document.getElementById('text').innerHTML = what;
}
-->
</script>
</head>
<body onload="changeContent('');">
<div id="text"><strong>Wird geladen...</strong><img src="loader.gif" alt="" width="220" height="19" border="0"></div>
<?php
flush();
sleep( 10 );
?> |
Animierte Ladebilder findet ihr unter http://www.ajaxload.info/
Viel Spaß |
| geschrieben von Klaush am 24.02.2009 - 07:32 |
Das ist keine JS Lösung, eher eine PHP aber darum geht es nicht.
Dir ist nicht klar was die Funktion macht?
Mit PHP wird der Funktion für ein paar Sekunden gestoppt und flush() sorgt dafür das während der Zeit die Seite weiter geladen wird. Das geht auch mit JS und der funktion setTimeOut(), der Trick ist der Timer in beiden Varianten. Wenn du so ein plumpe Funktion wolltest, dann bitte, nur solltest du wissen das die Zeit dann eben immer 10 Sekunden dauert, auch wenn die Seite schon nach 2 Sekunden völlig geladen ist.
Hier ist die Funktionsweise von sleep() und flush() beschrieben:
http://www.selfphp.de/funktionsrefe..../sleep.php |
| geschrieben von Gordon am 24.02.2009 - 08:12 |
Hi Klaush!
Also ich habe es bei mir auf 0 gesetzt. Und bei mir funktioniert es wunderbar. Mag sein das es bessere Lösungen gibt, jedoch hatte ich dazu nichts gefunden. |
| geschrieben von Gordon am 24.02.2009 - 08:37 |
Ach Mensch... Habe jetzt das
<?php
flush();
sleep( 0 );
?>
entfernt.
Ich dummerchen. Funktioniert natürlich auch ohne.... Beispiel: http://tierversicherung.finanzpruef....hp?id=6322
Also Danke nochmals Klaush |
| geschrieben von Klaush am 24.02.2009 - 09:09 |
Du meinst das, dass hier funktioniert???
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
| <script type="text/javascript">
<!--
function changeContent(what){
document.getElementById('text').innerHTML = what;
}
-->
</script>
</head>
<body onload="changeContent('');">
<div id="text"><strong>Wird geladen...</strong><img src="loader.gif" alt="" width="220" height="19" border="0"></div> |
Das Script bewirkt nichts, ausser das es beim Laden der Seite einfach nichts in innerHTML schreibt und der Inhalt der div=ID überschrieben wird, nämlich mit '' nichts. Ohne die Sleep und flush Funktion aus PHP geht da glaube ich nicht's, wenn ja, dann erkläre den Rest doch bitte wie es funktionieren soll.
Ps. Das Laden der Seite dauert bei mir immer 30 sek. und wir haben hier eine Standleitung.
Zu Erklärung:
| HTML-Quelltext | 1:
2:
| das Script wird geladen und mit nichts übergeben
<body onload="changeContent('');"> |
hier das Script:
dessen Übergabe changeContent('') leer ist und mit nichts in innerHTML geschrieben wird.
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
| <script type="text/javascript">
<!--
function changeContent(what){
document.getElementById('text').innerHTML = what;
}
-->
</script> |
diese Angabe ist sinnlos, da der Inhalt für das Element im Script überschrieben wird, es sei denn eine Anforderung von PHP mit sleep() und flush() kommt, was zu beweisen wäre.
| HTML-Quelltext | 1:
| <div id="text"><strong>Wird geladen...</strong></div> |
Es ist zwar schön das du eine Lösung hast mit der du leben kannst, dennoch ist eine Erklärung notwendig, denn der o.g. Code alleine stellt den Effekt nicht her. Du kannst mich davon überzeugen, der obere Code tut's nicht, auch wenn es bei dir scheinbar funktioniert. |
| geschrieben von Klaush am 24.02.2009 - 11:29 |
Hier noch einmal ein Beispiel wie ich vermute das es gemacht wurde, dabei wurde das Script auch schon so gepostet.
http://javarea.de/forum/tmp/test.php
|
|