Forum PHP.pl

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.

Google -> progress bar before page load

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

Ten post edytował smiesznylolek 24.10.2014, 16:46:47

Zobacz sobie to
http://jsfiddle.net/rLazhruz/

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

[HTML] pobierz, plaintext 
body{
overflow-y:hidden;
}
[HTML] pobierz, plaintext 

a potem w jQuery, w funkcji window.load która ukrywała "wczytywanie" użyłem

[HTML] pobierz, plaintext 
$('body').css('overflowY', 'auto');
[HTML] pobierz, plaintext 

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

Ten post edytował smiesznylolek 25.10.2014, 10:40:48