"Seite wird geladen" mit Layern realisieren

[Michael]

Hallo,

hab da mal eine Frage:

ich baue gerade eine Webseite mit Dreamweaver MX und habe im Body-TAG die Funktion "preload images" (onLoad) angegeben.
Jetzt möchte ich, daß solange die Seite noch lädt, ein Layer eingeblendet wird in dem eine kleine Gif-Animation "Loading Site...please wait" o. ä. anzeigt (z. B. für Leute mit Modem). Einblenden kann ich den Layer auch problemlos, ebenfalls mit "onLoad". Aber er soll ja auch wieder verschwinden, wenn alles geladen ist. "Hide Layer" mit "onUnload" funktioniert nicht.

Die Funktion sollte vor allem in Gecko-basierten Browsern wie Mozilla, Firefox und Safari (Apple) funktionieren. Wenn's im IE auch funktioniert, wäre das eine angenehme Nebenerscheinung.

Bitte keine Ratschläge in der Richtung, es mit Flash zu realisieren. Ich hab von Flash nicht viel Ahnung und mag das Programm auch nicht besonders.

vielen Dank schonmal im Voraus ;-)

Gruß
Michael

[Sven Rautenberg]

Moin!

ich baue gerade eine Webseite mit Dreamweaver MX und habe im Body-TAG die Funktion "preload images" (onLoad) angegeben.
Jetzt möchte ich, daß solange die Seite noch lädt, ein Layer eingeblendet wird in dem eine kleine Gif-Animation "Loading Site...please wait" o. ä. anzeigt (z. B. für Leute mit Modem). Einblenden kann ich den Layer auch problemlos, ebenfalls mit "onLoad". Aber er soll ja auch wieder verschwinden, wenn alles geladen ist. "Hide Layer" mit "onUnload" funktioniert nicht.

Gerade die Leute mit Modem sind dir mit Sicherheit sehr dankbar, wenn du ihren ohnehin schon langsamen Internetzugang nicht noch durch unnötige Gimmicks verschlimmerst. Eine animierte GIF-Grafik ist ja nicht 0 Byte groß, und dass man erst auf das Fertigladen aller Grafiken warten muß (was ja gerade bei Modembenutzern eine gewisse Zeit dauern kann), und nicht schon die geladenen HTML-Texte angucken darf, dürfte ein zusätzliches Ärgernis sein.

Bitte keine Ratschläge in der Richtung, es mit Flash zu realisieren. Ich hab von Flash nicht viel Ahnung und mag das Programm auch nicht besonders.

Ganz im Gegenteil: Realisier' es nicht in Flash, realisier' es nicht in Javascript, sondern realisiere es einfach NICHT! Es ist Unsinn, nervt, kostet Bandbreite (deine auf dem Server, für die du u.U. ja auch bezahlen mußt), ist eine zusätzliche Fehlerquelle, und bringt deinen Besuchern nichts. Dass die Seite geladen wird, das sieht er nämlich schon am Statusbalken seines Browsers.

- Sven Rautenberg

[Michael]

Hallo Sven,

ich wollte keine Grundsatzdiskussion darüber, ob dieses "Gimmick" nützlich ist oder nicht. Wenn dich solche Sachen nerven ist das deine Sache. Ich empfehle da Baldrian. Mich nervt's nicht.
Ich möchte einfach nur gerne erfahren, wie's geht.

Abgesehen davon: Wenn ich eine Gif-Animation mache, ist die zwar nicht 0 Kb groß, aber auch nicht mehr als 10 Kb, was noch zu vertreten sein dürfte. Außerdem werden nicht hunderte von Grafiken geladen sondern nur einige wenige, sodaß selbst bei Modem-Nutzern die Info nur einige Sekunden zu seheh sein wird und DSL-Nutzer höchstwahrsch. nichts davon mitbekommen.

Zweck der Übung ist es, etwas zu verstehen / dazuzulernen und nicht User zu nerven.

Darum noch mal die Frage an alle:
Wer kann mir einen Tipp geben?

Michael

[WauWau]

Hallo Michael,

ich wollte keine Grundsatzdiskussion darüber, ob dieses "Gimmick" nützlich ist oder nicht.

Diese Diskussionen entstehen bei gewissen Meinungsverschiedenheiten hier immer. Ich schließe mich übrigens Sven und "Ich" an, außer Trafficverbrauch sowie Ärgernis aller Beteiligten sind diese Dinger einfach bescheuert. Absolut. Siehe auch [1].

Wenn dich solche Sachen nerven ist das deine Sache. Ich empfehle da Baldrian. Mich nervt's nicht.

Nun, aber wenn es die Mehrzahl der Besucher deiner Homepage nervt, dann dürfte dich es sicherlich nerven, dass sie bald nicht mehr besucht wird.

Abgesehen davon: Wenn ich eine Gif-Animation mache, ist die zwar nicht 0 Kb groß, aber auch nicht mehr als 10 Kb, was noch zu vertreten sein dürfte.

Ach ja? 10kb runterzuladen dauern bei einer Modemgeschwindigkeit von 4kyte/sec. so um die 2.5 Sekunden; da ist die Frage ob in dieser Zeit nicht schon längst der gesamte HTML-"Code" der Seite runtergeladen ist und diese beim Klienten angezeigt worden ist und die Platzhalter für die noch zu ladenen Bilder bereits angezeigt werden, bevor die dumme, nervige Gif-Animation runtergeladen ist...

Außerdem werden nicht hunderte von Grafiken geladen sondern nur einige wenige, sodaß selbst bei Modem-Nutzern die Info nur einige Sekunden zu seheh sein wird und DSL-Nutzer höchstwahrsch. nichts davon mitbekommen.

Dann lasse deine "Info" doch einfach weg und basta. Bei einigen Sekunden dürfte der Modembenutzer die Grafik nämlich erst nach 2.5 Sekunden sehen, also bei 10 Sekunden Ladezeit wunderschöne 7.5 Sekunden lang eine hässliche, vom Benutzer höchstwahrscheinlich unerwünschte Grafik sehen.

Zweck der Übung ist es, etwas zu verstehen / dazuzulernen und nicht User zu nerven.

Dann baue dir den Script zusammen, teste ihn kurz offline auf deiner Seite, nehme ihn dann wieder raus und verpacke ihn - wenn das sofortige Löschen nicht sinnvoller wäre - gleich am hintersten Ende deiner FEstplatte ;-)

Darum noch mal die Frage an alle:
Wer kann mir einen Tipp geben?

Tja, falls du was möglichst ohne JavaScript machen willst, bietet sich z.B. ein zentriertes <body>-hintergrundbild "seite wird geladen" an, das dann, wenn der Vordergrund, dessen Hintergrund auf die eigentliche hintergrundfarbe des <body>s gesetzt ist, überdeckt wird.
Ansonsten hängt es größtenteils von deinem Seitenlayout ab, falls du es mit möglichst wenig Aufwand machen willst, welcher ja wiederum eine nicht-vergrößerung deiner eigentlichen Seite zur Folge hat.

WauWau

[daniel84]

Hallo Michael

Darum noch mal die Frage an alle:
Wer kann mir einen Tipp geben?

Ich. Wenns JavaScript sein darf, wäre das eine Lösung:

<div id="pleasewait">Bitte warten...</div>

direkt nach dem <body>. Und dann, direkt vor dem </body> folgendes:

<script type="text/javascript">
  document.getElementById("pleasewait").display = 'none';
</script>

Gruss,
Daniel

[WauWau]

Hallo daniel84,

<div id="pleasewait">Bitte warten...</div>

direkt nach dem <body>. Und dann, direkt vor dem </body> folgendes:

<script type="text/javascript">
  document.getElementById("pleasewait").display = 'none';
</script>

Du meintest doch eher dein <div id="pleasewait"> direkt nach dem Body und _im_ Body <body onLoad="document.getElementById('pleasewait').display = 'none';">, nicht wahr?

Wäre auf jeden FAll logischer. Das <div id="pleasewait"> wird dann noch mittels CSS formatiert (irgendwie hässlich grau, dann mit nem Rahmen rum und in die Mitte vom Dokument bzw. etwas weiter in die Mitte). Fertig ist das nervige System ;-)

WauWau

[daniel84]

Hallo WauWau

direkt nach dem <body>. Und dann, direkt vor dem </body> folgendes:

<script type="text/javascript">
  document.getElementById("pleasewait").display = 'none';
</script>

Du meintest doch eher dein <div id="pleasewait"> direkt nach dem Body und _im_ Body <body onLoad="document.getElementById('pleasewait').display = 'none';">, nicht wahr?

Nö, ich meinte genau das, was ich geschrieben habe. Sollte aber auf das gleiche hinaus laufen.

Gruss,
Daniel

[WauWau]

Hallo daniel84,

direkt nach dem <body>. Und dann, direkt vor dem </body> folgendes:

<script type="text/javascript">
  document.getElementById("pleasewait").display = 'none';
</script>

Du meintest doch eher dein <div id="pleasewait"> direkt nach dem Body und _im_ Body <body onLoad="document.getElementById('pleasewait').display = 'none';">, nicht wahr?

Nö, ich meinte genau das, was ich geschrieben habe. Sollte aber auf das gleiche hinaus laufen.

afaik würde es das aber nicht. Denn der Script wird ja da ausgeführt, wo er angetroffen wird, also noch bevor der <body> geladen wird. Oder?

WauWau

[wahsaga]

hi,

afaik würde es das aber nicht. Denn der Script wird ja da ausgeführt, wo er angetroffen wird, also noch bevor der <body> geladen wird. Oder?

beachte den unterschied zwischen <body> und </body> ;-)

aber onLoad würde ich auch für sinnvoller halten. denn dieser event beschreibt ja genau das ereignis, auf dessen eintreten hin reaktion gewünscht ist.

gruss,
wahsaga

[WauWau]

Hallo wahsaga,

beachte den unterschied zwischen <body> und </body> ;-)

Falls mich mein Computer da nicht täuscht (bei Windoof weiß man ja nie ;-), dann steht der <script>-Bereich im <head> vor dem <body> und wird dementsprechend auch da ausgeführt, also vor dem Laden des <body>'s.

aber onLoad würde ich auch für sinnvoller halten. denn dieser event beschreibt ja genau das ereignis, auf dessen eintreten hin reaktion gewünscht ist.

Und vor allem hat man keinen ganzen <script>-Bereich => zusätzliche Trafficersparnis ;-) *g*

WauWau

[wahsaga]

hi,

beachte den unterschied zwischen <body> und </body> ;-)

Falls mich mein Computer da nicht täuscht (bei Windoof weiß man ja nie ;-), dann steht der <script>-Bereich im <head> vor dem <body> und wird dementsprechend auch da ausgeführt, also vor dem Laden des <body>'s.

in der version, die Daniel gepostet hatte, eben nicht. [pref:t=79682&m=461773]

gruss,
wahsaga

[WauWau]

Hallo wahsaga,

beachte den unterschied zwischen <body> und </body> ;-)

Falls mich mein Computer da nicht täuscht (bei Windoof weiß man ja nie ;-), dann steht der <script>-Bereich im <head> vor dem <body> und wird dementsprechend auch da ausgeführt, also vor dem Laden des <body>'s.

in der version, die Daniel gepostet hatte, eben nicht. [pref:t=79682&m=461773]

Tada:

-----------------------------
<div id="pleasewait">Bitte warten...</div>

direkt nach dem <body>. Und dann, direkt vor dem </body> folgendes:

<script type="text/javascript">
  document.getElementById("pleasewait").display = 'none';
</script>
--------------------------------

tatsächlich! Das "/" beim </body> habe ich geradewegs übersehen. Sorry ;-)

WauWau

[Orlando]

Hi Daniel,

<div id="pleasewait">Bitte warten...</div>

das steht immer da ...

document.getElementById("pleasewait").display = 'none';

... und verschwindet nicht, wenn Javascript deaktiviert ist. Somit kann es extrem nervig sein. Besser, das Element, das später verschwinden soll wird auch per Javascript in die Seite geschrieben.

Grundsätzlich schließe ich mich [pref:t=79682&m=461746] an.

Grüße,
 Roland76 ;-)

[Ich]

Jetzt möchte ich, daß solange die Seite noch lädt, ein Layer eingeblendet wird in dem eine kleine Gif-Animation "Loading Site...please wait" o. ä. anzeigt (z. B. für Leute mit Modem).

Mal ganz blöd gefragt: Wenn Du irgendwo anrufst, machst Du das, um in der Warteschleife zu landen? Findest Du es toll, beim Arzt eine halbe Stunde im Wartezimmer zu sitzen? Fährst Du öfters ziellos mit dem Auto in der Gegend rum, nur um mal ordentlich im Stau oder an der Ampel zu warten?

Schlimmer als Webseiten, die eine Ewigkeit lang laden sind nur noch Webseiten, die beim Laden außer dem "Bitte warten" nichts anzeigen. Als wenn das nicht schon unten im Browser angezeigt werden würde, daß da was geladen wird.

[Hans Thomas Vogler]

FsmE,

Jetzt möchte ich, daß solange die Seite noch lädt, ein Layer eingeblendet wird in dem eine kleine Gif-Animation "Loading Site...please wait" o. ä. anzeigt (z. B. für Leute mit Modem). Einblenden kann ich den Layer auch problemlos, ebenfalls mit "onLoad". Aber er soll ja auch wieder verschwinden, wenn alles geladen ist. "Hide Layer" mit "onUnload" funktioniert nicht.

"onLoad" wird aktiv, wenn Die Seite fertig geladen ist. Dort muß also - wenn schon - der Befehl stehen, der Dein 750 KB animiertes GIF verschwinden läßt.

Der Layer muß als erstes Element im <body> stehen und absolut positioniert sein.

Den Rest kannst Du bis zum fertig Laden unsichtbar machen, indem Du ihn in eine Tabelle oder in ein als unsichtbar deklariertes DIV packst.

Wenn Du den User darauf warten lassen willst, bis alle Deine 25 MB Bilder geladen sind, musst Du "onLoad" für eine Funktion wie diese verwenden :

---
function Warten() {
 if (document.images[document.images.length].complete == true} VorHangAuf()
 else setTimeout("Warten()",30)
}
---

"VorHangAuf()" steht für eine Funktion, mit der Du das "Bitte warten!" Schildchen wegnehmen willst.

vielen Dank schonmal im Voraus ;-)

Gern geschehen. Sag bescheid, wenn Du eingesehen hast, daß DW ein Hobbybaukasten ist :-)

In sensibus mistis,
HaThoV

[Struppi]

ich baue gerade eine Webseite mit Dreamweaver MX und habe im Body-TAG die Funktion "preload images" (onLoad) angegeben.

onload ist das event, dass gefeuert wird, wenn ein Element komplett geladen wurde.
d.h. es tritt erst ein wenn die Seite fertig geladen ist.

Die einzige sinnvollle Lösung (wobei die frage ob das überhaupt sinnvoll ist) ist es die preload Funktion entsprechen zu erweitert und von jedem Bild den onload Event abzufragen.

z.b. in etwa so:

var fertig = 0; // anzahl der fertig geladenen Bilder
var anzahl = 0;// anzahl der zu ladende Bilder
var img = new Array();

function preloadImage(src)
{
anzahl++;
var i = img.length;
img[i] = new Image();
img[i].onload = function() {
fertig++;
if(fertig == anzahl) layerAusblenden();
}
img[i].src = src;
}

Struppi.