JavaScript

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

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:

<script type='text/javascript' src='https://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:

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

komentarzy 5

  • Awatar
    Ozirys

    11 maja 2012 17:28

    fajnie tylko pliku do pobrania nie ma :(

    Odpowiedz
    • Awatar
      Michał Kortas

      12 maja 2012 08:54

      Problem został naprawiony. Dziękuję za informację. Pobieranie pliku jest z powrotem możliwe ;-)

      Odpowiedz
      • Awatar
        Ozirys

        14 maja 2012 14:42

        Super dzięki :)

        Odpowiedz
      • Awatar
        Ozirys

        14 maja 2012 16:06

        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?

        Odpowiedz
  • Awatar
    Daxidov

    14 sierpnia 2012 13:38

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

    Odpowiedz

Zostaw odpowiedź