Przykład: http://jsfiddle.net/j6dxb/
PS. Każdy div, który ma się pojawiać (będzie zawarty w skrypcie), musi mieć nadane “display: none;” w css’ie.
a czy w tym co podaliście mi jest ten skrypt który pokaże od razu całą załadowaną stronę? żeby nie było widać co się ładuje (czyli wczytywanie obrazkow itp) tylko od razu załadowana strona ;p
A nie widzisz?
tutaj jest wersja, która mam nadzieję pozwoli ci zrozumieć co się dzieje w skrypcie.
Są dwa divy główne. Jeden:
To sie pojawi od razu
[/code] Pojawia się przy ładowaniu DOMu. Nie ma reguły css, która by ją ukryła. Potem jest drugi div:
[code]
…
Dla tego diva jest reguła css, która go ukrywa (display:none;). Do tego wszystkiego dochodzi jquery, który uruchamia na triggera ready (ten sprawdzany jest na elemencie dokument, czyli cała zawartość strony) funkcję fadeIn, na elemencie div.wait_to_load. Funkcja ta zmienia display:none; na display:hmm… chyba domyślny dla elementu, ale nie jestem pewny. W każdym razie stopniowo.
Reasumując - jeśli kod jest poprawnie sformatowany element się załaduje, nie zostanie wyświetlony, nastąpi pełne ładowanie kodu, a na koniec odpali się fadeIn. Jeśli chcesz ukryć całą stronę - po prostu wrzuć całość do wrappera z odpowiednią klasą.
Ukrywanie elemetów w css i pokazywanie w js ma jeden minus- nie pokaże elementu w przeglądarce z wyłączonym js. Moja propozycja:
Ale Twoje rozwiązanie jest nieco sprzeczne z założeniami… Tzn, przez cały proces ładowania strony obiekt jest widoczny, potem chowany, żeby znów go pokazać?
Podane skrypty mają za zadanie opóźnić wyświetlenie elementów w nim określonych, bardziej dokładnie, nie wyświetlać ich w czasie ładowania strony i wyświetlić je po x-czasie od zakończenia ładowania strony.
Więc jeśli pozostawisz coś ze strony “niepodpięte” pod skrypt, to taki element będzie ładował się normalnie/domyślnie, tak jak to dana przeglądarka wyświetla (Fx przykładowo ma lub może mieć “wewnętrzne” opóźnienie wyświetlania zawartości…).
Różnice w skryptach są takie, że w przykładzie podanym przeze mnie masz wybór selektywny w pojawianiu się elementów (możesz określić kolejność wyświetlenia każdego elementu oddzielnie), u tfl’a skrypt grupuje elementy i wyświetla je kaskadowo, natomiast Grześka skrypt “najpierw” ukrywa określone elementy, a następnie wszystkie na raz pokazuje po podanym czasie (z rozwinięciem tychże w dół i prawo… ;)).
Teraz wracając do przykładu podanego w poprzednim poście, możesz ją “przebudować” np. w taki sposób, gdzie:
-
“jedynka” obejmuje resztę div’ów (robi za wspomniany przez tfl’a “wrapper”) i wyświetla się pierwsza (można ją wywalić ze skryptu -i z css’a nadającemu jej “display: none;”, inaczej się nie wyświetli)
-
“dwójka” jest nagłówkiem i wyświetla się po “jedynce”
-
“trójka” z “piątką” po powyższych jednocześnie
-
“czwórka” wyświetlana jest na końcu
Na tej samej (w sumie) zasadzie zadziała również skrypt podany przez tfl’a, z tą tylko różnicą, że będzie zachowana kolejność…
Przez cały proces ładowania DOMU- czas niezauważalny dla oka
No i przysiadlem nad tym i wychodzi, ze oboje nie mamy racji
$(document).ready();
dotyczy momentu zaladowania domu i masz racje, ze trwa to ulamki sekund. Ale ma sie takze nijak do zaladowania tresci strony (w tym na przyklad grafik itd.). W zwiazku z tym dom moze byc zaladowany, a tresc nie. Poprawnie nalezaloby wiec skorzystac z
$(window).load();
Wtedy natomiast juz czas ten moze byc zauwazalny.