Come creare una schermata di caricamento in HTML5
La guida semplice e pratica
Il caricamento delle nostre pagine web a volte può richiedere un po’ di tempo.
Vedere tutte le immagini e le parti del sito visualizzarsi “a scatti” una dopo l’altra può essere veramente sgradevole.
Dunque perché non mostrare all’utente una bella schermata di caricamento che andrà a svanire con un bell’effetto piacevole da guardare?
Ecco come fare, passo per passo:
Per prima cosa scaricatevi da Google una bella gif di caricamento che vi piace.
Ora andiamo a creare un box (div) all’inizio della nostra pagina web:
<html>
<head>
<!-- Le vostre cose -->
</head>
<body>
<!-- Box relativo alla schermata di caricamento -->
<div id="schermata_caricamento">
<p>Caricamento</p>
<img src="Immagini/Caricamento.gif">
</div>
<!-- Il resto della vostra pagina... -->
<!-- Librerie JavaScript incluse -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
</html>
A questo punto dovremo rendere in nostro div in grado di coprire la nostra intera pagina, usiamo il CSS:
/* Regole relative alla schermata di caricamento */
#schermata_caricamento
{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: white;
}
#schermata_caricamento > p
{
text-align: center;
margin-top: 5%;
}
#schermata_caricamento > img
{
display: block;
margin: 0 auto;
width: 17%;
}
Una volta caricata la pagina il div deve scomparire, dunque aggiungiamo alla fine della pagina uno script in JavaScript. In questo caso nella pagina è presente anche la libreria jQuery:
// Faccio sparire la schermata di caricamento
$("#schermata_caricamento").fadeOut(500);Abbiamo finito, semplice vero?
Riassumiamo in modo facile come funziona!
All’inizio della pagina HTML verrà creato un div (che rappresenta la nostra “pagina” di caricamento) che coprirà l’intero schermo, nascondendo al di sotto di esso gli altri elementi che staranno caricando.
Una volta che il browser sarà arrivato a caricare la fine della pagina HTML che contiene lo script verrà dunque attivato quest’ultimo che nasconderà la schermata di caricamento con un’animazione.
