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


(Jedrekk95) #1

(manieKMP) #2

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.


(Konrad Kosowski) #3

Wersja bardziej elastyczna pod wzgledem rozwoju kodu:

http://jsfiddle.net/CtBRH/


(Jedrekk95) #4

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


(Konrad Kosowski) #5

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ą.


(Grzesie K) #6

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/


(Konrad Kosowski) #7

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ć?


(manieKMP) #8

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... :wink:).

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ść...


(Grzesie K) #9

Przez cały proces ładowania DOMU- czas niezauważalny dla oka


(Konrad Kosowski) #10

@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.


(Grzesie K) #11