[jQuery] Loading-Overlay

fixekiste · #1 (**permalink**) 21.09.2009, 18:20

Hallo zusammen,

würde gerne ein Loading-Overlay, wie auf dieser Seite zu sehen, realisieren. Das ganze läuft mit Prototype und (soweit ich sehen kann) mit den folgenden Zeilen:

Code:

document.observe("dom:loaded", function() {
	if ($('page-loading-overlay')) {
		$('page-loading-overlay').fade({duration:0.2});
		$('page-loading-overlay-text').fade({duration:0.2});
	}
});

Ich nutze bei mir jQuery und denke, die obige Variante zu portieren, wäre nicht sonderlich schwer (standardmäßig das Overlay einblenden und nachdem das DOM fertig geladen wurde das Overlay ausblenden lassen). Was mich allerdings stört, ist, dass bei Nutzern ohne JS das Overlay nicht verschwindet.

Gibt es eine Möglichkeit, dass Loading-Overlay erst per jQuery einzublenden und - nachdem die Seite bzw. das DOM fertig geladen wurde - auch wieder auszublenden, sodass Nutzer ohne JS das Overlay gar nicht erst zu sehen bekommen?

Danke im Voraus!
Olli

Pr0g · #2 (**permalink**) 21.09.2009, 19:29

Würde fürs einblenden nicht ein einfaches document.write() reichen? Geht ja nur darum, dass der Layer nicht im Code landet, wenn kein JS aktiv ist (so wie bei deiner Beispielseite).

Danach brauchst du nur einen onload-Eventhandler mit dem Fading hinzuzufügen. Was jQuery angeht kann ich dir leider nicht helfen.

fixekiste · #3 (**permalink**) 21.09.2009, 21:31

Danke dir, da hätte ich eigentlich auch selbst drauf kommen können

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
overlay Problem	RFDarter	Javascript & Ajax	3	09.10.2010 09:30
Overlay vor externer Weiterleitung	markuskoehler	Javascript & Ajax	0	27.07.2010 00:50
Formular submit und overlay ladegrafik	onkel-tom	Javascript & Ajax	0	25.04.2009 13:30
Overlay mit 100% Höhe - auch beim Scrollen! IE zickt..	WurstBude	CSS	2	05.11.2008 17:50
Overlay und Inputfield ohne Cursor	svebal	CSS	5	05.05.2008 17:47