Odwiedzający wchodzi na Twoją stronę stronę internetową po raz pierwszy. Musi pobrać pliki HTML, Javascript, CSS, nierzadko spore pliki graficzne. Wiąże się to z chwilą oczekiwania, w czasie której użytkownik może patrzeć jak poszczególne elementy się ładują. Z drugiej strony możemy mu zaserwować miły dla oka preloader, który zniknie po załadowaniu się całej witryny. W tym wpisie przedstawię Wam jak taką funkcjonalność wdrożyć.
W pliku HTML naszej strony zaraz po otwarciu tagu <body> umieszczamy warstwę, w której znajdzie się zawartość naszego preloadera:
<div id="preloader" style="position: fixed; top:0; left:0; right:0; bottom:0; z-index: 99; background-color:#fff;">Trwa ładowanie strony...</div>
Jak widzicie nasza warstwa posiada unikalne id, po którym będziemy ją za chwilę rozpoznować w jQuery. Ma ustawioną position: fixed, aby nie "uciekła" do góry w wypadku scrollowania przez użytkownika w czasie ładowania strony.
Przed zamknięciem tagu </body> zamieszczamy kilka linijek kodu jQuery (pamiętajcie, żeby w ramach <head> wstawić tag <script> z biblioteką jQuery):
<script type="text/javascript"> $(window).load(function() { $('#preloader').fadeOut(); } </script>
W powyższym kodzie wykorzystujemy event $(window).load(), który jest uruchamiany przez jQuery w momencie pełnego załadowania się serwisu internetowego. Dajemy wówczas sygnał do ukrycia warstwy preloadera i tym samym pokazania zawartości naszej strony.
To wszystko.
Zaprezentowany powyżej kod jest przedstawiony w dużym uproszczeniu. Dodajcie do niego swoje efekty graficzne i wizualne, aby Wasz preloader był atrakcyjny dla odwiedzających.
PS. Do testowania działania preloadera polecam w przeglądarce Chrome w Narzędziach dla programistów w zakładce Network symulację działania witryny na wolniejszych łączach.
