Aggiungere un indicatore di caricamento del sito è abbastanza semplice con jQuery. L'unica cosa da definire è il lasso di tempo in cui l'indicatore dovrà essere visibile prima di nasconderlo e mostrare i contenuti del sito. Possiamo gestire questo aspetto tramite un timer JavaScript che crea un intervallo di attesa. Vediamo i dettagli dell'implementazione.
Abbiamo la seguente struttura di base:
<body>
<!-- contenuti del sito -->
<ul id="boxes">
<li>
<div class="box">1</div>
</li>
<li>
<div class="box">2</div>
</li>
<li>
<div class="box">3</div>
</li>
</ul>
<!-- indicatore di caricamento -->
<img src="loading.gif" alt="" id="loader" />
</body>
Impostando un attributo alt vuoto facciamo in modo che i browser testuali e le tecnologie assistive ignorino quest'immagine. Definiamo il nostro CSS nascondendo inizialmente sia i contenuti del sito che l'indicatore:
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
body {
background: #fff;
color: #000;
font: 100% Arial, sans-serif;
}
#boxes {
width: 620px;
height: 220px;
margin: -110px 0 0 -315px;
padding: 0 5px;
list-style: none;
position: absolute;
top: 50%;
left: 50%;
background: #000;
border-radius: 10px;
display: none;
}
#boxes li {
float: left;
width: 200px;
height: 200px;
margin-right: 5px;
position: relative;
top: 5px;
}
#boxes li div.box {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 2em;
color: #fff;
background: #d34545;
border-radius: 6px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
cursor: pointer;
}
#loader {
position: absolute;
top: 50%;
left: 50%;
margin: -16px 0 0 -16px;
width: 32px;
height: 32px;
display: none;
}
Con jQuery dobbiamo prima mostrare l'indicatore, quindi creare un timer che aspetti 2 secondi prima di nasconderlo di nuovo e mostrare i contenuti del sito:
$(function() {
$('#loader').show();
setTimeout(function() {
$('#loader').hide();
$('#boxes').fadeIn('slow');
}, 2000);
// codice aggiuntivo
$('li', '#boxes').each(function() {
var $li = $(this);
var $box = $('div.box', $li);
$box.hover(function() {
$box.stop(true, true).animate({
width: 150,
height: 150,
marginLeft: '-75px',
marginTop: '-75px',
lineHeight: '150px'
}, 500);
}, function() {
$box.stop(true, true).animate({
width: 100,
height: 100,
marginLeft: '-50px',
marginTop: '-50px',
lineHeight: '100px'
}, 500);
});
});
});
Il codice aggiuntivo crea un effetto di espansione sui box e non è pertinente al nostro esempio ma usato semplicemente per completezza. Potete visionare l'esempio finale in questa pagina.