Brainleaf
Web Resources

In questo tutorial vedremo come realizzare un semplice script per inserire una pagina di caricamento da mostrare all'apertura di un sito web. Una pagina di caricamento dinamica è un'accortezza utile sia per gli utenti di un sito, sia per i webmaster che con essa potranno nascondere all'utente tutto il processo di caricamento di un sito, dai contenuti, alle immagini, ai javacript, cosa che spesso rende addirittura impossibile la navigazione o una corretta interazione tra utente e applicazione. Inserire una pagina di loading è quindi una pratica corretta e molto spesso necessaria e chi è alle prime armi con l'uso di javascript potrebbe trovare un po' difficile questa operazione, quando invece è possibile ottenere un prodotto di tutto rispetto con poche righe di codice javascript, html e css.

Per ottenere il risultato finale ci avvarremo della libreria jQuery che facilita non poco la stesura del javascript necessario alla creazione di una loading page.

 

ATTENZIONE: essendo questo tutorial basato sulla libreria jQuery è necessario che essa sia linkata alla pagina html. Se non disponete di una versione aggiornata della libreria potete scaricarla dal sito ufficiale: http://jquery.com/download/

Per prima cosa si dovrà inserire nel markup, magari all'inizio della pagina, un div che fungerà da pagina di caricamento. A questo div assoceremo dello stile css e infine la funzione jquery che lo trasformerà in una loading page.

Ecco il markup HTML necessario

<div id="startLoader">
</div>

Ora che abbiamo steso il markup della pagina, passiamo alla ralizzazione dello stile css.
Dovendo creare una sorta di pagina fasulla, si dovrà usare qualche accortezza al fine di farla sembrare una pagina vera e propria e con essa "nascondere" il resto del sito. Per far questo useremo quindi una posizione fixed, settando top, right, bottom e left a 0. Diamo anche un buon valore di z-index in modo da esseri sicuri che il div si sovrapporrà a tutto il resto della pagina.
Ecco il CSS necessario

body {
    overflow: hidden;
}

#startLoader {
    background-image: url(../img/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    text-align: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
}

Avrete sicuramente notato che nel css è stata anche assegnata la proprietà overflow: hidden al body della pagina. Questo è necessario per nascondere la comparsa di un'eventuale barra di scorll dovuta ai contenuti della pagina. La necessità di nasconderla si presenta in quanto non vogliamo che l'utente, con la rotellina del mouse, scrolli la pagina mentre questa è in caricamento, cosa che, se avvenisse, farebbe mostrare la pagina (al momento della scomparsa della loading page) non dal suo top, ma invece da dove l'utente l'ha spinta con lo scroll.
Sarà javascript a "liberare" l'overflow alla fine del caricamento della pagina e qundi alla scomparsa della pagina di caricamento.

Per quanto riguarda invece l'immagine utilizzata nell'esempio, una rotellina animata, potete scaricare quella che preferite da uno dei molti siti che ne forniscono già pronte.
Ecco un link interessante: www.ajaxload.info

Ora che disponiamo sia di markup che di css potremo occuparci del javascript.
La funzione da realizzare è molto semplice e si basa principalmente sull'evento $(window). load() e il metodo hide(). Vediamo come fare.

Per prima cosa occupiamoci di scrivere la funzione che farà scomparire la pagina di caricamento e assegnare al body la proprietà css overflow:auto.

function startLoader() {
     $('#startLoader').hide();
     $('body').css({'overflow':'auto'});
}

Queste due righe sono quanto necessario, ma per rendere più gradevole l'esperienza di navigazione per l'utente è bene settare una durata minima di permanenza della pagina di loading, prima di mostrarne i contenuti, poiché non sarebbe bello, in caso di un caricamento molto veloce, mostrare la pagina di loading per un tempo appena percettibile.

Settiamo quindo un timeout di un secondo (potrete poi cambiare il valore di tempo come più ritenete giusto) in questo modo

function startLoader() {
    setTimeout(function(){
        $('#startLoader').hide();
        $('body').css({'overflow':'auto'});
    }, 1000);
}

Ora che abbiamo pronta la funzione di chiusura della pagina, non ci resta che intercettare la fine del caricamento della pagina e di tutti i suoi contenuti. Per questo ci viene in aiuto l'evento $(window).load();

Ecco il codice javascript completo:

function startLoader() {
    setTimeout(function(){
        $('#startLoader').hide();
        $('body').css({'overflow':'auto'});
    }, 1000);
}

$(window).on('load', function() {
    startLoader();
});

Con questi pochi interventi è possibile migliorare l'esperienza di navigazione per l'utente e rendere sicuramente più gradevoli i porpri prodotti.

Questo pacchetto non è più disponibile in download. Vi preghiamo di usare il plugin jqueryIntroLoader.

jqueryIntroLoader Plugin

dato il successo di download di questo script abbiamo realizzato un plugin molto più avanzato in grado di generare automaticamente pagine di intro. Leggi il nostro articolo e Scaricalo!

Vai alla pafina di jQueryIntrLoader Plugin: Pagina di caricamento in jQuery - jQuery introLoader

Joomla SEF URLs by Artio