Script “caricamento in corso”

Vi è mai capitato di realizzare qualche pagina web che richiede molte risorse e ha dei tempi di caricamento abbastanza lunghi?

Lasciare l’utente finale davanti ad una pagina bianca con il browser “In attesa di carimento” non è proprio bellissimo. Per risolvere questo problema ho creato questo semplice script da inserire nelle vostre pagine molto pesanti.

Innanzitutto bisogna inserire questa riga nel tag HEAD della pagina html in modo da far caricare il js che ci servirà, la librerie come vediamo la prendiamo direttamente da Google così da diminuire il carico sul nostro server:

Sempre nel tag HEAD incolliamo anche questo pezzettino di codice CSS, potete anche inserirlo direttamente nel vostro file CSS se volete tenere più pulita la pagina:

Ancora nel tag HEAD inseriamo il pezzo di codice javascript che ho creato contente le funzioni per mostrare e nascondere la barra di caricamento:

Ultima cosa da inserire nella pagina sono queste poche righe che includono il DIV che contiente la scritta “Caricamento…”, l’immagine della barra di caricamento e il codice che richiama la funzione javascript per il controllo. Importante è inserire questo codice appena dopo l’apertura del tag BODY della pagina, ancora prima di qualsiasi altro DIV.

 

Ecco tutto! Qui sotto vi metto l’immagine che ho usato io per la barra di caricamento ma potete utilizzare qualsiasi altra immagine che volete!

loading

Per scaricarla cliccate col tasto destro sopra e cliccate nuovamente su “Salva immagine con nome”

  • Fernando

    Ciao ho provato ad integrare il tuo codice nella maniera sopra citata ma non mi da alcun riusultato!! ti scrivo sotto come ho applicato i tuoi consigli:

    Senza nome 1

    #loading_screen
    {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    padding-top: 300px;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 9999;
    }
    img.loading{
    margin-top: 20px;
    }

    (function(){
    if (window.addEventListener)
    {
    window.addEventListener(“load”, nascondi_loading_screen, false);
    }else{
    window.attachEvent(“onload”, nascondi_loading_screen);
    }
    })();
    function mostra_loading_screen()
    {
    document.getElementById(“loading_screen”).style.display = ‘block’;
    }
    function nascondi_loading_screen()
    {
    document.getElementById(“loading_screen”).style.display = ‘none’;
    }

    Caricamento…

    mostra_loading_screen();

    Selezionare la sezione
    Chi Siamo
    Chi Siamo ENG
    Chi Siamo DE
    Eventi
    Eventi ENG
    Eventi DE
    Menu
    Menu ENG
    Menu DE
    Promozioni e News
    Promozioni e News ENG
    Promozioni e News DE
        Max. 20 file per volta (Dim. 800 X 300)

    Inserisci eventuali commenti all’immagine:

  • Cristiano

    Ciao Fernando, lo script funziona, l’ho provato. Non è utile includere jQUERY in quanto non viene usato… prova a rimuoverlo. Grazie, la guida mi è stata utile.