Come far vedere un’immagine animata mentre la pagina web sta caricando


Come far vedere un’immagine animata mentre la pagina web sta caricando

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:

gearPreloader_71Preloader_61 Preloader_51 Preloader_41 Preloader_31Preloader_21 Preloader_11 Preloader_10 Preloader_9 Preloader_8 Preloader_7 Preloader_6 Preloader_5 Preloader_4 Preloader_3 Preloader_2 Preloader_1

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!

Come far vedere un’immagine animata mentre la pagina web sta caricando
5 (100%) 1 vote

#css#gif#icona di caricamento#immagine animata#jquery#loading icon#pagina web sta caricando

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


Hai bisogno di aiuto personalizzato con qualcosa che non è documentato qui? Richiedi assistenza
Iscriviti alla nostra newsletter

Iscriviti alla nostra newsletter

Iscriviti alla nostra mailing list per ricevere le ultime notizie e gli aggiornamenti dal nostro team.

You have Successfully Subscribed!