Creare una pagina di loading per un sito web è una pratica che per i puristi è inutile mentre per i grafici è necessaria, certo che è sempre più diffusa. Credo comunque che per pagine con uso intenso di javascript e che necessitano di alcuni istanti di caricamento per poter dare all’utente una migliore esperienza di navigazione, ormai sia essenziale. Ci sono diversi esempi sul web di come ottenere un preloader, internet explorer addirittura permetteva un tag meta chiamato transitional nell’header di pagina HTML, purtroppo questa cosa funzionava appunto solo con I.E. Quindi iniziamo a definire una cosa, se proprio dobbiamo inserire un preloader facciamolo almeno che sia compatibile con tutti i browser, per cui scartiamo quelli costruiti attorno ai css, quelli solo javascript, quelli in flash e concentriamoci su jquery.
Questo framework, infatti, ci viene in aiuto con una libreria al proposito, si tratta di jquery.introLoadernel nostro caso utilizzeremo la versione ‘light’ per avere un minimo ingombro a livello di Kb nella pagina, procuriamoci quindi la libreira jquery.introLoader.pack.min.js scaricandola da qui. Abbiamo poi bisogno di linkare anche un’altra libreria, che anche in questo caso sarà la versione più leggera la jquery.min.js questo perchè all’ interno della nostra pagina abbiamo bisogno di scrivere la funzione

altrimenti dovremmo scrivere a mano del javascript che controlli che il documento è stato caricato.
A questo punto dobbiamo dire alla nostra pagina di visualizzare il preloader quando il documento è pronto (‘ready’) scriviamo quindi questo codice subito sotto il tag body:

Ecco il codice completo di un semplice esempio con una piccola personalizzazione:

Welcome to my page !

Qui vediamo il risultato che abbiamo ottenuto.

Sergio

Sergio

Analista Programmatore: C++ - Net C# - JAVA - Python - Php - Objective C Xamarin cross plattform iOS, Android, Windows and Mac. Certificazioni [candidate ID SR2210816] - IBM Certified Business Process Analyst - IBM WebSphere Integration Developer V6.1 - IBM Certified SOA Solution Designer [2007] - IBM Lotus Notes & Domino Technical Sales Professional v2 - IBM Lotus Sametime Unified Telephony Entry Technical Sales -IBM Certified Deployment Professional - Tivoli Compliance Insight Manager V8.5 -IBM Optim Implementation for Distributed Systems (2009) Professional Test v1
Sergio