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 Bywalec

    Wiadomości:
    16
    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 :)
     
    Krzysiek Snow, 12 Grudzień 2018
    #1
    casar, MateuszŁ oraz LukaszC lubią to.

Poleć forum znajomym