Pojawienie się strony od razu/pojawienie sie divów po kolei

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.

Wersja bardziej elastyczna pod wzgledem rozwoju kodu:

http://jsfiddle.net/CtBRH/

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?

http://jsfiddle.net/CtBRH/2/

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:

http://jsfiddle.net/CtBRH/14/

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

@Grzesie1k

No i przysiadlem nad tym i wychodzi, ze oboje nie mamy racji :slight_smile:

$(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.