post

Dzisiaj bardzo prosty i szybki sposób na wykonanie preloadera (z animowanym statusem ładowania), który będzie widoczny na ekranie do momentu wczytania całej strony. Jest to szczególnie przydatne w przypadku stron, które dużo „ważą” – mają sporo treści, grafik i animacji.

Dodanie takiej funkcjonalności wyeliminuje nam wpatrywanie się w monotonne tło przeglądarki w oczekiwaniu na wczytanie strony. Wykonanie całości jest naprawdę proste, a bardzo dobry przykład takiego skryptu można znaleźć na stronie: PreLoadMe, a lightweight jQuery website preloader. Sprawdźmy zatem jak wygląda konstrukcja takiego skryptu.

Co musimy zrobić?

Utworzyć kontener przykrywający całą stronę oraz kontener dla grafiki. Kontenerem div zasłonimy całą stronę, a w jQuery użyjemy efektu zanikania (fadeOut), aby stopniowo odkrywać zawartość strony.

Opisać kontenery w arkuszu CSS. Określimy kolor i pozycję głównego konetenera, a dla grafiki określimy style pozycjonujące obrazek na środku ekranu.

Załadować bibliotekę jQuery w sekcji head. W nagłówku strony, czyli pomiędzy tagami <head></head> umieścimy link do aktualnej wersji biblioteki jQuery.

Dodać skrypt jQuery. Dodamy snippet jQuery, który odsłoni zawartość strony po jej całkowitym wczytaniu.

Wykonać animowaną grafikę. Możesz stworzyć ją w programie graficznym typu Easy GIF Animator czy Adobe Photoshop. Ciekawe animowane grafiki można też wykonać w serwisie Animated GIF Generator lub preloaders.net. Ten ostatni pozwala stworzyć gify właśnie dla potrzeb wykonania skryptu preloadera.

Generowanie animowanych gifów

Dodajmy zatem link do biblioteki jQuery w sekcji <head></head>:

Najpierw utworzymy sobie kontener, który przykryje całą naszą stronę, a w nim nasz blok z grafiką.

Kontenery opiszemy sobie w CSS, tło div#preloader wypełnia gradient, ale możesz też ustawić jednolite. Wszystko zależy od Twoich preferencji.

Kolejność nakładających się na siebie elementów jest tutaj dość istotna. Pamiętaj o parametrze z-index – warstwa powinna być na samym szczycie (nie może jej nic przykrywać), więc lepiej nadać jej jakąś bezpieczną wartość. Teraz jeszcze tylko skrypt jQuery, który dodamy tuż przed tagiem zamykającym </body>:

Demo oczywiście do wglądu.

4 odpowiedzi na “Jak wykonać preloader z wykorzystaniem CSS i jQuery?

  1. Zorbiłam gif na preloaders.net, i wszystko tak jak tutaj napisane i nie działa… :/

Dodaj komentarz

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

CommentLuv badge