Preloader strony WWW - jak wykonać?

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.