W dzisiejszym artykule postanowiłem ponownie zająć się tematyką jQuery. Daje nam ona wiele możliwości podczas tworzenia stron www. Poprzednim poradnikiem na ten temat był efekt płynnego przewijania strony. Tym razem pokażę jak przygotować preloader, czyli informację o stanie ładowania witryny.
Sam potrzebowałem takiego elementu, tworząc własne portfolio, dlatego oszczędzę Wam czasu na poszukiwania i przełożę w jak najprostszy sposób jego wykonanie. Nie jest to nic trudnego, więc każdy kto posiada „ciężką” stronę powinien sobie z tym poradzić. Takie rozwiązanie pozwoli uniknąć wielu nerwów internautom, którzy własnie u Ciebie poszukiwać będą informacji. A więc do dzieła!
Na początku pobieramy archiwum ZIP ze wszystkimi plikami potrzebnymi do działania. Aby je pobrać, wystarczy kliknąć: preloader-webroad-pl.zip. Wypakowujemy wszystkie pliki i wysyłamy je na nasz serwer, w miejsce, gdzie umieszczona jest nasza strona. Następnie w sekcji <head> wstawiamy poniższy kod:
1 2 3 | <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> <link rel="stylesheet" href="css/queryLoader.css" type="text/css" /> <script type='text/javascript' src='js/queryLoader.js'></script> |
Następnie, tuż przed zamknięciem sekcji <body> wstawiamy:
1 2 3 | <script type='text/javascript'> QueryLoader.init(); </script> |
To już wszystko co musimy zrobić. Nasz preloader już działa.
Został sprawdzony w przeglądarkach: Firefox, Safari, Opera, Chrome, IE7, IE8.
Anglojęzyczny artykuł źródłowy: http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
Mam nadzieję, że nie raz Wam się przyda.
fajnie tylko pliku do pobrania nie ma :(
Problem został naprawiony. Dziękuję za informację. Pobieranie pliku jest z powrotem możliwe ;-)
Super dzięki :)
a propo skrypt działa ok – ale mam problem z wielojęzycznymi stronami – gdy pojawia się http://www.nazwaserwera/en skrypt już nie działa… jakiś pomysł na ominiecie tego problemu?
Preloader był by dobry gdyby pokazywał stronę po ściagnięciu całej grafiki itp a nie po załadowaniu strony…