jPreloader.js: animiamo anche i caricamenti

Quasi sicuramente, un buon 80% di voi conoscerà bene il sito web del cosiddetto “web designer dei vip”, e il restante 20% avrà usato almeno una volta il sito “Mega”, famoso per permettere agli utenti di effettuare i propri uploads. Cos’hanno in comune questi due siti?

Il preloading. Proprio così: in questo tutorial, andremo a vedere come utilizzare un plugin che permetterà il precaricamento di tutto il DOM, inclusi i propri asset, mostrando nel contempo una splash page con una barra di caricamento.

Tuttavia, senza offesa per gli sviluppatori, non sempre questi ultimi hanno molto gusto per il design, motivo per cui andremo a vedere come modificare il CSS, e anche l’effetto che si ha una volta completato il caricamento del documento (di default un semplice fadeOut della splash page).

Scarichiamo il materiale

Per iniziare, rechiamoci in questo sito e scarichiamo tutto il materiale che ci serve. Fatto ciò, posizioniamo il file jpreloader.css dentro una cartella che chiameremo css, mentre il file jpreloader.js andrà messo dentro una cartella di nome js. Bene, arrivati a questo punto, siamo pronti per iniziare.

Iniziamo definendo la struttura

Partiamo, come sempre, dalla struttura HTML della nostra pagina, che sarà la seguente:

<html>
 <head>
  <link href="style.css" rel="stylesheet"/>
  <link href="css/jpreloader.css" rel="stylesheet"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="js/jpreloader.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('body').jpreLoader({
       splashID: "#splash"
      });
    });
   </script>
 </head>
 <body>
 
  <div id="splash">
   <p>4 Seasons</p>
  </div>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
 
</body>
</html>

Semplice vero? Nonostante ciò, in realtà vi ho fatto un piccolo spoiler: all’interno dell’ head possiamo trovare anche lo script che servirà a far funzionare la nostra splash-page di precaricamento; ma per ora diamo tempo al tempo, vi basti sapere che i quattro div  (one, two, three, four) conterranno quattro diverse immagini, mentre il div splash servirà ad inserire del contenuto nella pagina di preloading.

Passiamo ora al codice CSS, che a parte quella di dare un po’ di stile al tutto, non ha importanti funzioni. Potete trovare il suddetto proprio qui sotto.

@import url(http://fonts.googleapis.com/css?family=Lato:700);

html, body {
      margin: 0;
      width: 100%;
      height: 100%;
}

.one, .two, .three, .four {
      height: 25%;
      background-size: cover;
      background-position: center;
}

.one {
      background-image: url(img/1.jpg);
}

.two {
      background-image: url(img/2.jpg);
}

.three {
      background-image: url(img/3.jpg);
}

.four {
      background-image: url(img/4.jpg);
}

.splash {
      position: absolute;
}

/* Extra style for jPreLoader */

#jpreOverlay {
	background-color: #3498db !important;
}

#jpreBar {    
	border-radius:0 !important;
	-moz-border-radius:0 !important;
	-webkit-border-radius:0 !important;
	box-shadow: none !important;
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      filter: none;
      background-color:#3498db !important;
      background-size:60px 60px !important;
	-moz-background-size:60px 60px !important;
	-webkit-background-size:60px 60px !important;
	-o-background-size:60px 60px !important;
}

#jpreLoader{
	width:300px;
	height:25px;
	box-shadow: none !important;
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	border-radius:0 !important;
	-moz-border-radius: 0 !important;
	-webkit-border-radius:0 !important;
}

#jprePercentage {
	display: none !important;
}

#jpreSlide{
      font-family: Lato !important;
	font-size: 50px !important;
	font-weight: 700 !important;
	color: #FFF !important;
}

Dopo il solito import del mio Google Font preferito, ovvero il Lato, iniziamo subito a dare stile all’html ed il body, per dopo proseguire con i quattro div iniziali, assegnandogli height: 25%, ed un background-image (sì, questo plugin riesce a caricare anche i background dati via CSS).  In seguito passiamo alla modifica del design della splash page, con modifiche fondamentalmente estetiche (border-radius, box-shadow, background-color ecc…).

Ora, il nostro sito è pronto nel design generale, ma manca nel funzionamento. Andiamo a vedere come completarlo al 100%.

… e finiamo con il farlo funzionare!

Questa volta, il codice sarà davvero brevissimo (come avviene spesso per i plugin), ma andiamolo a spiegare comunque.

$(document).ready(function() {
  $('body').jpreLoader({
    splashID: "#splash"
  });
});

Come sempre, andiamo a definire l’evento .ready del documento, dove all’interno andiamo ad inserire la chiamata a jPreloader, che potrebbe anche semplicemente essere:

$('body').jpreLoader();

Difatti,  splashID è solo una proprietà per personalizzare il contenuto della pagina di precaricamento, e mostrare qualcos’altro oltre alla progressbar, che è un elemento nativo di questo plugin.

Per altre opzioni e/o informazioni, vi rimando al sito ufficiale.

Ci rimane a questo punto solo un’ultima cosa: cambiare l’effetto al caricamento dei contenuti.

Cerchiamo questo codice nel file jpreloader.js:

var loadComplete = function() {
		$(jOverlay).fadeOut(800, function() {
			$(jOverlay).remove();
			onComplete();	//callback function
		});
	}

e sostituiamolo con:

var loadComplete = function() {
		$(jOverlay).animate({ marginTop: -$(window).height() }, function() {
			$(jOverlay).remove();
			onComplete();	//callback function
		});
	}

In questo modo avremo un bellissimo effetto di Slide Up.

Conclusioni

Anche per oggi abbiamo terminato con quest’articolo. Come sempre, spero di avervi insegnato qualcosa di nuovo e di utile da poter includere nei vostri progetti. In particolare ne consiglio l’uso laddove ci siano molte immagini (anche abbastanza pesanti) da precaricare per non far restare l’utente davanti alla solita pagina bianca. Ovviamente potete scaricare il materiale da questo link e visionare l’esempio finale in questa pagina.

Alla prossima!

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »

L'autore

Conosco in modo approfondito HTML5, CSS3, Wordpress e mi sto specializzando sul framework jQuery e sui linguaggi server side PHP e MySQL. Adesso mi credi un robot, non è vero? Non ti preoccupare, in realtà nel tempo libero mi diletto in qualche scatto, ed ovviamente non disdegno mai una bella pizza con gli amici!

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

1 commento

  1. Nicolò Ribaudo

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *