Preloader strony – nie pozwól czekać bez informacji!


13 marca 2011 / Michał Kortas


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:

Następnie, tuż przed zamknięciem sekcji <body> wstawiamy:

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.



5 odpowiedzi na “Preloader strony – nie pozwól czekać bez informacji!”

  1. Ozirys pisze:

    fajnie tylko pliku do pobrania nie ma :(

  2. Daxidov pisze:

    Preloader był by dobry gdyby pokazywał stronę po ściagnięciu całej grafiki itp a nie po załadowaniu strony…

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *