1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

PORADNIK Preloader - ładowanie strony

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika Krzysiek Snow, 12 Grudzień 2018.

  1. Krzysiek Snow

    Krzysiek Snow Zaglądacz

    Wiadomości:
    14
    Docenione treści:
    4
    Dzień dobry,

    poniżej opisuję jak wdrożyłem w swoim sklepie preloader. Pomijam dyskusję o słuszności takich pozycji i jak to wpływa na szybkość strony, mi się po prostu to podoba :)

    W pierwszej kolejności odwiedziłem stronę:
    https://devcorner.pl/jak-zrobic-preloader/
    oraz
    https://devcorner.pl/12-minimalistycznych-loaderow-css/

    Następnie wybrany preloader wdrażamy w naszym sklepie (ja wybrałem taki bez zewnętrznego kodu js-javascript dokładnie Fala)

    Przechodzimy do Konfiguracja >> Integracje >> Integracje własne

    Pierwszy kod wklejamy wg opisu z artykułu na początku sekcji <body>, esklep nie daje takiej możliwości bezpośrednio, ale wprowadzenie kodu w polu Nagłówek strony - <head> esklep bez problemu interpretuje i umieszcza w sekcji <body> na samym początku, zalecam dodanie kodu na samym końcu tego pola po wszystkich <meta ***>:

    Uwaga! Jeśli wkleimy to przed znacznikiem </body> (drugie pole w Integracje własne) to będziemy mieli niepożądany efekt, mianowicie strona się załaduje i na chwilę mignie preloader.
    HTML:
    <div id="loader-wrapper">
    <!-- ----- PRELOADER ----- -->
        <div class='wave'>
            <div class='dot'></div>
            <div class='dot'></div>
            <div class='dot'></div>
            <div class='dot'></div>
        </div>           
    </div>
    


    Będąc na tej samej stronie w polu Stopka strony, przed zamknięciem </body> dodajemy kod:
    HTML:
    <script>
    
    <!-- ----- PRELODAER ----- -->
    
    $(window).load(function() {
        $("#loader-wrapper").fadeOut();
    });
    
    </script>
    


    Przechodzimy do Konfiguracja >> Wygląd >> Aktywny styl graficzny a po lewej stronie wybieramy Własny styl CSS i dodajemy styl związany z preloaderem w tym przypadku fala.
    HTML:
    /* ---------- PRELOADER ---------- */
    
    .js .load, .js #loader-wrapper {
      display: block;
    }
    
    #loader-wrapper {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10000;
      background: rgba(255,255,255,0.97);
      display: none;
    }
    
    /* Design */
    /* Animation */
    /* Helpers */
    
    .wave {
      width: 117px;
      height: 13px;
      position: absolute;
      top: 50%;
      margin-top: -6.5px;
      left: 50%;
      margin-left: -58.5px;
    }
    .wave div {
      display: inline-block;
      width: 13px;
      height: 13px;
      border-radius: 6.5px;
      background: #25c1ac;
      animation: wave 2.6s cubic-bezier(0.626, 0, 0, 1) infinite;
      margin-right: 13px;
    }
    .wave div:nth-child(1) {
      animation-delay: -0.34667s;
    }
    .wave div:nth-child(2) {
      animation-delay: -0.26s;
    }
    .wave div:nth-child(3) {
      animation-delay: -0.17333s;
    }
    .wave div:nth-child(4) {
      animation-delay: -0.08667s;
    }
    
    @keyframes wave {
      0% {
        transform: translateY(0px);
      }
      40% {
        transform: translateY(0px);
        background: #25c1ac;
      }
      60% {
        background: #21bba6;
        transform: translateY(20px);
      }
      80% {
        background: #1db6a1;
        transform: translateY(-20px);
      }
      100% {
        background: #25c1ac;
        transform: translateY(0px);
      }
    }

    Następnie po lewej stronie wybieramy Własny skrypt JS i wklejamy kod:
    HTML:
    /* ---------- PRELOADER (wyjątek jakby nie było obsługi JS po stronie klienta) ---------- */
    $('html').addClass('js');
    
    Sam kod pilnuje czy przeglądarka pozwala na obsługę skryptów, ale z drugiej strony gdyby nie skrpty js to sklep by nie działał :)

    Jeśli wybierzecie inny preloader, odpowiednio należy wkleić kod przed <body> ten ze znaczkami <div> bo nieznacznie się różnią od autora preloadera, no i oczywiście trzeba wkleić inny styl CSS.

    Istnieje możliwość edytowania stylów css przez narzędzia ze strony z artykułu z preloaderami, można też dopasować sobie kod w miarę umiejętności edycji css sprawdzić efekt na bieżąco, a gotowe kody wkleić na stronę.

    ps. efekt można obejrzeć na www.ecoandyou.pl :)
     
    casar, MateuszŁ oraz LukaszC lubią to.

Poleć forum znajomym