close
jak-zrobic-preloader

W tym artykule dowiesz się jak zrobić prosty preloader, który ukryje stronę do momentu pełnego załadowania.

W tym przykładzie użyjemy animacji flat preloader, której kod znajdziesz w tym artykule. Możesz wykorzystać dowolny z przedstawionych tam efektów lub stworzyć własny. Przejdźmy teraz do budowy preloadera.

Struktura HTML

Zaraz za znacznikiem <body> dodajemy kod:

To cały HTML potrzebny do zrobienia preloadera. Wewnątrz diva #loader-wrapper znajduje się tylko prosta animacja, ale możesz umieścić tam cokolwiek.

Style CSS

Przejdźmy do stylów CSS.

Tym kodem rozciągamy #loader-wrapper na cały ekran. Wysoka wartość z-index sprawia, że użytkownik nie będzie w stanie zobaczyć ładującej się “pod spodem” strony. Dodajmy teraz style do naszego loadera.

Jeśli teraz odświeżysz stronę, to zobaczysz animacje czterech okręgów na szarym tle. Jeśli masz jakąś inną treść na stronie (poza elementem #loader-wrapper), to będzie ona niewidoczna.

Ukrywanie preloadera

Preloader jest już prawie gotowy. Musimy go jeszcze ukryć, gdy strona zostanie już załadowana. W tym celu skorzystamy z funkcji jQuery – load. Przed zamykającym znacznikiem </body> dodaj kod:

Div #loader-wrapper zniknie dopiero wtedy, gdy strona zostanie w pełni załadowana. Jeśli testujesz stronę na serwerze lokalnym, to ładowanie będzie zbyt szybkie byś mógł zobaczyć preloader. Na potrzeby testu możemy opóźnić zniknięcie preloadera:

W ten sposób nakładka zniknie dopiero po 3 sekundach od załadowania strony. Pamiętaj, żeby na gotowej witrynie korzystać tylko z pierwszej wersji. Nie chcemy sztucznie opóźniać ładowania 🙂

Jest jeszcze jeden problem, którym musimy się zająć.

Wyłączony Javascript

Sporadycznie może się zdarzyć, że użytkownik z jakiegoś powodu będzie miał wyłączoną obsługę Javascript. W tym przypadku nie zobaczy naszej strony, ponieważ preloader nigdy nie zniknie.

W umieszczonym wcześniej kodzie CSS mogłeś zobaczyć dwie reguły display: none umieszczone wewnątrz komentarza. Możesz teraz usunąć znaki /* i */. Preloader oczywiście zniknie. Chcemy go pokazać tylko wtedy, gdy JS jest włączony. Zaraz po otwierającym znaczniku <script> dodaj kod:

Co nam to da? Jeśli Javascript będzie włączony, to klasa .js zostanie poprawnie dodana. Do naszych stylów CSS dodajmy teraz prosty kod:

Dzięki temu elementy preloadera będą widoczne tylko wtedy, gdy JS będzie działać poprawnie.

Pobierz pliki | Zobacz demo

Tags : preloader
  • Kuba Dura

    Super. Dzięki 🙂

  • Dariusz Darek

    Dopiero się uczę, ale nie wiem czy tylko u mnie należy zmienić

    $(window).load(function() {
    $(“#loader-wrapper”).fadeOut();
    });

    na

    $(window).ready(function() {
    $(“#loader-wrapper”).fadeOut();
    });

    żeby preloader zniknął po załadowaniu strony? Hmm…

    • ready() nie jest tym, o co nam chodzi, bo wykonuje się od razu po załadowaniu dokumentu HTML.

      Czy preloader umieszczony w demo na końcu artykułu znika poprawnie?

      • Dariusz Darek

        Właśnie problem w tym, że cały czas widnieje na stronie i nie znika po załadowaniu. Próbowałem wyrzucić wszystkie skrypty z pliku script.js, których użyłem, ale to nie pomogło. Sam kod JS, który jest tu podany umieszczam w pliku index.html przed zamknięciem tagu . Proszę spojrzeć na screen w załączniku i widniejący błąd w konsoli. https://uploads.disquscdn.com/images/8ab9e7b6f24d90bd9e51ed7fbcfd44bb50fed587bb55355bc80db2d67c64d6ae.png

        • Dariusz Darek

          Problem prawdopodobnie rozwiązałem.
          Zapis kodu:
          $(window).load(function()

          zmieniłem na:
          $(window).on(‘load’, function()

          Mam nadzieje, że tym razem jest dobrze.

  • veranoo

    Preloader na setTimeout to dobry pomysł?

    • To nie jest dobry pomysł. setTimeout jest ustawiony tylko w celu testu na lokalnym serwerze. Załadowanie strony byłoby tak szybkie, że nie zobaczylibyśmy efektu. Na “normalnym” serwerze już z tego nie korzystamy 🙂

      • veranoo

        document.addEventListener(“DOMContentLoaded”, function(event) {
        console.log(“DOM fully loaded and parsed”);
        });

        Można w sumie zrobić tak i ładować w domie duży obrazek 🙂
        PS: Swoją drogą zawsze się zastanawiam jak działa preloader z progressbarem.

  • Proste i fajnie wyglądające :).

  • Ja proponowałbym coś w taki deseń: http://codepen.io/Comandeer/pen/mRqGmP → trza znaleźć lepszy sposób na ukrycie tekstu w .preloader__label, ale całość ma podpięte (mam nadzieję) odpowiedni role ARIA. Dodatkowo warto pomyśleć nad dodaniem [aria-busy=true] na html, gdy preloader będzie pokazywany.