W trakcie budowy nowej odsłony Webyourself zmierzyliśmy się z problemem dużej ilości danych koniecznych do pobrania przy pierwszym wejściu na stronę główną. Rozwiązaliśmy go wdrażając preloader, połączony z nieskomplikowaną animacją treści, która pojawia się po zakończeniu ładowania (mam tutaj na myśli wjazd słów "Droga na internetowe szczyty..."). Efekt w naszej opinii jest przyjazny dla oka, jednak w czasie testów witryny uciążliwe było patrzenie nań przy każdym kolejnym przejściu do strony głównej. Postanowiliśmy to zmienić, a z pomocą przyszły nam pliki cookies.
Założenie było następujące: wyświetlamy przy pomocy jQuery preloader i animację przy pierwszym wejściu użytkownika na stronę. W tym samym czasie zapisujemy w jego przeglądarce ciasteczko z informacją, że ta akcja została wykonana. Przy kolejnych odwiedzinach strony głównej jQuery sprawdza czy cookie istnieje: jeśli tak, nie pokazujemy ani preloadera, ani animacji.
Jeżeli nie widzieliście jeszcze naszego wpisu jak zbudować prosty preloader, zajrzyjcie tutaj.
Jak to wygląda w praktyce?
Na początek konieczne jest umieszczenie w tagu <head> naszej witryny odnośnika do biblioteki jQuery oraz pluginu jQuery cookie (tutaj znajdziecie link do niego). Następnie przed zamknięciem tagu </body> wstawiamy taki kod:
<script type="text/javascript"> $(function () { // sprawdzamy czy plik cookie jest już zapisany w przeglądarce if (jQuery.cookie('webyourself_preloaded') != '1') { // jeśli nie // tutaj wstawiamy kod naszego preloadera oraz animację // a także zapisujemy plik cookie $.cookie('webyourself_preloaded', '1', { expires: 2 }); } else { // jeśli plik cookie jest już zapisany // chowamy warstwę z preloaderem $('#preloader').fadeOut(); } }); </script>
W kodzie umieściłem komentarze za co odpowiada dany fragment. Szerzej wyjaśnię tylko sposób zapisania i odczytania ciasteczek, który odbywa się w powyższym przykładzie.
Zapisanie cookie:
$.cookie('webyourself_preloaded', '1', { expires: 2 });
'webyourself_preloaded' to nazwa naszego ciasteczka,
'1' to wartość jaką ono przyjmuje,
{ expires: 2 } - w tym miejscu decydujemy przez ile dni cookie będzie przechowywane w przeglądarce. W naszym przypadku oznacza to, że jeśli odwiedzicie stronę główną w ciągu 2 dni od pierwszej wizyty, nie zobaczycie preloadera i animacji na wejściu.
Odczyt cookie odbywa się w następujący sposób:
jQuery.cookie('webyourself_preloaded')
Jeśli macie jakieś pytania, piszcie w komentarzach.
