[:it]Non è una grande idea far vedere una bella immagine animata mentre la pagina web sta caricando? In questo modo migliorerai l’esperienza utente tenendolo “occupato”, trasmettendogli l’illusione di sprecare meno tempo affinché la pagina finisca di caricare.
Per fare questo è semplice, si può fare tramite CSS e jQuery.
Scegliete tra queste gif per la vostra anteprima:
Come far vedere un’immagine animata mentre la pagina web sta caricando
1. Aggiungete questo elemento subito dopo il tag <body>
<div id="loader" class="se-pre-con"></div>
2. Aggiungete questo stile CSS per mostrare l’immagine e posizionarla al centro della pagina
/* Incollate questo stile CSS al vostro file CSS */
/* Questo funziona solo con Javascript,
Se non presente, non fa vedere nulla */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}
3. Adesso aggiungete questo codice jQuery per fare vedere l’immagine animata mentre la pagina sta caricando e di nasconderla quando ha finito di caricare
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
//paste this code under the head tag or in a separate js file.
// Aspetta che la finestra(window) abbia caricato tutto
$(window).load(function() {
// Facciamo sparire l'immagine quando è tutto caricato
$(".se-pre-con").fadeOut("slow");;
});
Tutto qui, adesso ricaricate la pagine dei vostri siti e vedete l’animazione
Se avete dubbi, non esitate a chiedere sotto nella sezione commenti.
Buon lavoro a tutti![:]