Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][HTML][JavaScript]Ładowanie strony HTML przed jej wyświetleniem + animacja
Forum PHP.pl > Forum > Przedszkole
smiesznylolek
witam,
chciałem się Was doradzić w jaki sposób mogę zrobić ładowanie strony HTML przed jej wyświetleniem, a w czasie tego ładowania żeby się pojawiła jakaś animacja. Strona będzie "pojedyncza" scrollowana, będzie na niej jedno lub dwa większe zdjęcia, po dobrych kilka Mb. Dlatego też chciałbym aby strona się najpierw załadowała a potem już można było przelecieć ją w całości bez obaw że dane zdjęcia się nie wczytają. Podkreślam że będzie to tylko jedna strona główna, bez podstron.
Wazniak96
Google -> progress bar before page load smile.gif
smiesznylolek
szukałem trochę i coś tam znalazłem ale nie do końca mi to pasowało. Ale rozwiązałem to troszke inaczej, prosił bym tylko o stwierdzenie czy to dobry pomysł i czy może tak zostać. Sprawa wygląda tak użyłem jQuery i window.(load) oraz stworzyłem diva aby zakrył całą stronę i wypełniłem go kolorem a następnie umieściłem w nim na środku gifa "wczytywania". Po załadowaniu całej strony w window.load mam funkcję która robi fadeOut diva z progress barem oraz nałożonym tłem. Ogólnie spisuje się całkiem dobrze. Tylko jedna rzecz mi się nie podoba, że podczas wczytywania jest widoczny pasek do przewijania strony po prawej - bo pod tym divem z wczytywaniem jest cała stronka. Prosił bym o opinie czy takie coś może zostać czy razczej słabe rozwiązanie i o poradę w sprawie tego paska do przewijania strony
pdg1264
Zobacz sobie to
http://jsfiddle.net/rLazhruz/
smiesznylolek
Cytat(pdg1264 @ 24.10.2014, 18:05:56 ) *


ale to nie jest do końca to o co mi chodziło, po pierwsze strona wyświetla się jak jeszcze nie jest załadowana (moja ładuje się w całości i dopiero się wyświetla), a po drugie paski przewijania strony są widoczne, przez co podczas ładowania strony ktoś może niepotrzebnie zjechać w dół zamiast zacząć przeglądanie od początku;/ i jest tak w tym co Ty podałeś jak i moim.
To są wersje robocze w celu zrobienia tego wczytywania:
Twoja - www.gbv.pdg.pl/
Moja - www.te.pdg.pl/


jakośik te paski przewijania przekminiłem:)
Najpierw w stylach dałem

  1. body{
  2. overflow-y:hidden;
  3. }

a potem w jQuery, w funkcji window.load która ukrywała "wczytywanie" użyłem
  1. $('body').css('overflowY', 'auto');



teraz mnie tak naszło, skoro ma to być scrollowana strona to te paski w ogole nie są potrzebne, tylko jak dam overflow-y:hidden; to ich nie ma ale też nie mogę scrollować;/ Jak to rozwiązać?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.