Prosty preloader strony w jQuery

Gdy strona jest przepełniona np. plikami graficznymi o dość dużym rozmiarze, dobrze i efektownie jest zaopatrzyć się w preloader, który będzie wyświetlał się do czasu, aż całość zostanie załadowana. Do wykonania prostego preloadera wykorzystamy zaledwie 4 linijki jQuery oraz dwa selektory CSS.

Zacznijmy od dodania do sekcji head biblioteki jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

a także skryptu, który usunie preloadera po załadowaniu się strony.

<script type="text/javascript">
$(window).load(function() { // Czekamy na załadowanie całej zawartości strony
	$("#preloader #image").fadeOut(); // Usuwamy grafikę ładowania
	$("#preloader").delay(350).fadeOut("slow"); // Usuwamy diva przysłaniającego stronę
})
</script>

Teraz czas na CSS.

<style>
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.7);
	z-index: fixed;
}
#preloader #image {
	width: 120px;
	height: 120px;
	position: absolute;
	left: 50%;
	top: 50%;
	background: #000 url('preloader.gif') no-repeat center;
	margin: -60px 0 0 -60px;
}
</style>

Jak można zauważyć, w stylu wczytujemy animowaną grafikę. Aby ją zdobyć, należy udać się pod ten adres i skorzystać z generatora. Ja użyłem gifa o rozmiarze 80×80 pikseli na czarnym tle.

Ostatnim zadaniem jest dodanie, zaraz po tagu body, kilka linijek HTML:

<div id="preloader">
	<div id="image"></div>
</div>

Komentarze

  1. Celniaaa dnia 2 sierpnia 2013 o 15:58 napisał(a):

    Fajne;] Polecam wszystkim ;D

  2. Małkoś dnia 6 września 2013 o 04:04 napisał(a):

    Działa i kozacko wygląda. Mały minus zauważyłem, że ten skrypt + połączenie groundworka z sliderami psuje wygląd, ale na to można zaradzić 😀

  3. Ola dnia 9 listopada 2014 o 17:14 napisał(a):

    Super sprawa! Prosto i estetycznie. Mam przy tym dwa pytania:
    1. jak sprawić by całe okno widniejące za preloaderem
    (a nie jedynie okienko preloadera) było np. czarne tj, by nie widać było za nim obrazu? (proszę się nie śmiać, pytanie może głupie, ale pyta Pani laik 🙂
    2. czy istnieje możliwość stworzenia takiego preloadera z równoczesnym przekierowaniem na inną domenę? Mam na myśli sytuację, kiedy preloader jest widoczny do momentu pełnego załadowania strony, na którą następuje przekierowanie?
    Z góry pięknie dziękować za odpowiedź 🙂

    • KubA dnia 10 listopada 2014 o 17:42 napisał(a):


      #preloader {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,1);
      z-index: fixed;
      }
      #preloader #image {
      width: 120px;
      height: 120px;
      position: absolute;
      left: 50%;
      top: 50%;
      background: #000 url('preloader.gif') no-repeat center;
      margin: -60px 0 0 -60px;
      }

    • KubA dnia 10 listopada 2014 o 17:44 napisał(a):

      2. Przekierować na drugą stronę i na niej dać preloader aż do pełnego załadowania strony. 🙂

Dodaj komentarz

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