Creare un preloader per il sito.

MarcoGrazia

Utente Attivo
15 Dic 2009
813
18
18
60
Udine
www.stilisticamente.com
Ciao, metto qui poche righe di codice per creare un layer di preloading adatto ad un sito un po' lento a caricarsi.
Sorvolo sui motivi per cui un sito possa essere lento all'apertura, ricordo solo che i motivi devono essere sempre e solo oggettivi, e non va implementato un sistema di preloading per un sito che DEVE essere migliorato, pena la perdita di traffico.
Comunque se i motivi sono ad esempio il caricamento di immagini, stile Pinterest per capirci, vediamo un semplice codice che ce lo permette.
Prima il foglio di stile:
Codice:
body
{
   z-index: 1;
}
.loading-layer
{
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: rgba(209, 209, 209, 0.8) !important;
   background-color: #D1D1D1;
   z-index: 10000;
}
.loading-layer img
{
   position: absolute;
   left: 50%;
   top: 50%;
   width: 200px;
   height: 200px;
   margin: -100px -100px;
   background-color: transparent;
   z-index: 10001;
}
spiego la sua funzione:
  • body: lo z-index inizializza, diciamo così, il livello base da cui partire, non è strettamente necessario, specie se usate file come reset.css o normalize.css o un framework come Bootstrap, ma è sempre meglio inizializzarlo per vecchissimi browser ( ma chi lo usa ancora Netscape 4? :D ).
  • .loading-layer: come si vede è un layer a tutta pagina, e consiglio di non usare width ed height per mostrarlo, perché se la pagina è più lunga dello schermo, scrollando vedrete che esso termina solo la dove finiva lo schermo, lasciando vuota la parte sottostante. Mentre usando il posizionamento assoluto funziona sempre, anche al ridimensionamento della pagina. Altre soluzioni sono comunque le benvenute.
    • background-color: rgba(209, 209, 209, 0.8) !important; perché !important? Per fargli saltare la dichiarazione successiva. Infatti i vecchi browser MSIE fino alla 8 se non vado errato, non contemplavano il canale alfa e quindi la trasparenza, con questo vecchio escamotage, Chrome e Mozilla, MSIE dal 9 in poi e altri, saltano la dichiarazione successiva che imposta un colore di sfondo omogeneo.
  • .loading-layer img: posizione assoluta per l'immagine della gif rotante al centro dello schermo, immagino che 200px siano sufficienti, ma se non bastassero, ovvio, aumentatele, ma attenzione ad aumentare pure i margini.
Ed ora il semplice codice html che permette di mostrare il layer al caricamento della pagina:
HTML:
<div class="loading-layer"><img src="img/loading.gif"></div>
Di per se basta questo, infatti lanciata la pagina, si vede così com'è un layer semitrasparente a tutta paginacon una gif rotante al centro, che copre tutto e non va più via :D
E allora bisogna cancellarlo, ma quando?
Quando la pagina è caricata come dicevamo no? E quindi quando viene scatenato l'evento load, vediamo come fare:
Due metodi, javascript e jquery:
Codice:
//  Pure Javascript.
//  Metodo 1:
document.onload = function()
{
  document.getElementById('loading').style.display = 'hide';
}; 
//  Metodo 2:
document.addEventListener("load", function()
{
  document.getElementById('loading').style.display = 'hide';
});
Quale dei due metodi funziona meglio? Ma non saprei dire, posso solo aggiungere che funzionano tutte e due, ma che se il vostro problema è la compatibilità tra browser di serie MSIE, sappiate che il metodo 2 su MSIE 8 non funziona e ci vuole un workaround, quindi diventa giocoforza utilizzare il metodo 1 per evitare troppo codice per quel che ci si propone di fare!
L'unica avvertenza è quella di identificare il layer di loading con un ID, anche se si può identificarlo in altro modo, così è più semplice, quindi modificate la riga html in queto modo <div id="loading" class=.... dove loading è solo un nome di fantasia che identifica il loader, ricordate che non possono esserci nella stessa pagina due ID identici :)
Codice:
//  jQuery.
<script type="text/javascript" src="js/jquery.min.css"></script>
<script type="text/javascript">
$(function()
{
  $(document).ready( function()
  {
     $('.loading-layer').hide(500);
  });
});
</script>
Il metodo con jquery non è più semplice, anzi semmai è il contrario perché per realizzare una cosetta così semplice, inseriamo tantissimo codice inutile.
Quindi se non avete bisogno di usare jquery per altre cose nella vostra pagina, evitate di appesantire le pagine con codice inutile e preferite il metodo pure javascript, tanto funziona uguale.
Ma se non ce la fate ad evitarlo :D almeno questo vi mette un'animazione che dura giusto mezzo secondo, ovviamente modificabile a vostro piacere.
I metodi li ho provati con Firefox 50, Chrome 54.0 e MSIE 9 su Windows 7 e funzionano.

Spero di essere stato utile, aggiungo solo che si puà usare anche l'attributo onload="" all'interno di qualsiasi tag dell'html per scatenare l'evento e quindi, il tutto può essere utilizzato anche per caricare solo pezzi di codice.
Buon lavoro, Marco.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao Marco,
in jquery puoi scrivere cosi
Codice:
$(function () {
      $('.loading-layer').hide(500);
 });
o cosi
Codice:
 $(document).ready(function () {
      $('.loading-layer').hide(500);
});
non è necessario metterli entrambi.
Il primo se non ricordo male equivale a
Codice:
$(window).load(function() {});
attende il caricamento della pagian compreso tutto il contenuto multimediale (iimmagini/video).
Il secondo attende solamente che la struttura html del documento sia pronta .
Si potrebbero anche unire i metodi
Codice:
window.onload = function () {
      $('.loading-layer').hide(500);
}
 

MarcoGrazia

Utente Attivo
15 Dic 2009
813
18
18
60
Udine
www.stilisticamente.com
In effetti $(function () {}); e $(document).ready(function(){}); sono sinonimi; in genere li uso per verificare l'avvenuto caricamento della pagina e quindi anche della libreria, a priori andrebbero usate SEMPRE, proprio per evitare di chiamare in modo inappropriato una qualsiasi funzione della libreria, prima che questa venga caricata in memoria e lanciata.
Purtroppo l'abitudine fa fare anche di questi scherzi e quindi è inutile scrivere:
Codice:
$(function()
{
  $(document).ready( function()
.....
Basta scrivere una delle funzioncine che hai scritto tu.
In realtà il problema è che il layer che si pone sì a tutta pagina, ma poi "scrollando" si vede comunque la fine, come di una saracinesca alzata a metà :D
Quindi ho sudiato una soluzione semplice e rapida ( ed anche ovvia alla fine ) cioè il posizionamento non deve essere assoluto ma fisso!
Quindi il CSS diventa così:
Codice:
.loading-layer
{
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: rgba(209, 209, 209, 0.8) !important;
   background-color: #D1D1D1;
   z-index: 10000;
}
E funziona!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
anchio uso fixed, con height e width al 100% senza bottom e right, funziona anche cosi. attendo però sempre il caricamento completo delle immagini e uso l'ultima sintassi che ho postato.
 

MarcoGrazia

Utente Attivo
15 Dic 2009
813
18
18
60
Udine
www.stilisticamente.com
anchio uso fixed, con height e width al 100% senza bottom e right, funziona anche cosi. attendo però sempre il caricamento completo delle immagini e uso l'ultima sintassi che ho postato.
Sul CSS non so dirti quale delle due soluzioni è migliore, probabilmente quella che funziona :)
Sull'ultima sintassi, è lo stesso, diciamo che per come la vedo io, se usi già jquery nella pagina, tanto vale continuare ad usarlo, se no meglio non usarlo del tutto; è solo un punto di vista ovviamente, dico solo che comprarsi un camion per andare a fare la spesa è inutilmente dispendioso e jquery è molto dispendioso in fatto di risorse.
Poi ovviamente dipende dalla compatibilità che vuoi avere.
Ad esempio:
Codice:
<body onload="miaFunzione()">
equivale a
Codice:
window.onload = function(){}
e questi non hanno problemi di compatibilità.
Usare le funzioni jquery ti permette di essere compatibile con tutti i browser che sono previsti da quella libreria, ma è pur sempre uno strato di software aggiuntivo sopra al javascript nativo; per questo dico che se vuoi fare le cose per bene, meglio non usare jquery se non necessario.
Per la cronaca, rispettando il tuo metodo c'è da aggiungere che tu usi l'oggetto window e non document, la differenza è che con il tuo metodo l'evento onload si scatena quando tutto, ma proprio tutto è caricato nella pagina, cioè, sia i documenti esterni ( css, javascript, foto, swf, quello che vuoi ) che il DOM poi viene scatenato l'evento.
Se invece usi document questo scatena onload quando il solo DOM è caricato, quindi anche se non sono caricati i componenti esterni; alla luce di ciò, per un preloader è meglio usare window.
Ah, $(document).ready() utilizza pure DOMContentLoader e quindi è come document, ma si crea un casino di wrapper e workaround per la compatibilità fra browser.
https://developer.mozilla.org/en-US/docs/Web/Events#DOMContentLoaded
( C'era anche la pagina Microsoft ma è stata toltahttps://developer.microsoft.com/en-us/testdrive/HTML5/DOMContentLoaded/Default.html/ )
 

neo1976

Nuovo Utente
27 Mar 2015
11
0
1
conoscete uno script demo di un preloader per un video? tutti i preloader che ho trovato su internet sono solo per immagini.
 
Discussioni simili
Autore Titolo Forum Risposte Data
G [PHP] Creare script di prenotazione con controllo disponibilità. PHP 7
F Creare elementi html con javascript Javascript 4
Shyson Modificare codice e creare link PHP 0
Cosina Creare bottone delete in form upload PHP 5
Cosina Creare bottone delete in form upload PHP 1
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
L Creare una forma geometrica Photoshop 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
S Libreria PHP per creare file dwg o dxf PHP 0
R Come creare sistema Add to homescreen PHP 3
L Creare un countdown con giorno specifico della settimana PHP 3
W Creare link di una dato Classic ASP 0
W creare file .jar Java 2
M Creare con il Vb 2010 Il Classico Notes di Windows Vista Visual Basic 1
MarcoGrazia Creare una password Snippet Javascript 0
J creare pagina php di prenotazione PHP 5
A Creare un modulo di ricerca avanzata con dreamweaver HTML e CSS 0
INTEROPERABILITY Sviluppatrice/formatrice creare APP Offerte e Richieste di Lavoro e/o Collaborazione 0
L Creare una pagina pre-home WordPress 1
G Creare side-bar non visibile da dispositivi mobile HTML e CSS 0
L creare oggetti da una classe tramite un form Javascript 0
Web93 CREARE SITO WEB COMICS CON WORDPRESS WordPress 0
maxnegri Contare sessioni aperte e creare condizione PHP 1
A Come creare pulsante donazione PayPal HTML e CSS 5
L [CERCO] Creare blog su WordPress con tema Divi Offerte e Richieste di Lavoro e/o Collaborazione 3
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
R [Photoshop] Creare Azione Photoshop 1
F [PHP] creare tabella e tasto cerca PHP 3
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
B [PHP] Creare PDF dopo inserimento dati form PHP 4
A [HTML] Creare sito web per eLearnig HTML e CSS 2
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
R [PHP] Creare sistema random PHP 3
D [PHP] Consigli su come creare form PHP 1
I Creare Qsl radioamatore con testo editabile Presentati al Forum 1
T [PHP] Creare Honeypot per form contatti PHP 10
S [PHP] Creare collegamento filtri di ricerca al database PHP 6
Z Creare VirtualHost Apache2 con PHP? Programmazione 0
max_400 [HTML] Come creare un jpg animata (non gif animata) HTML e CSS 3
A Come creare un framset Sviluppo app per Android 1
T con oop creare un ciclo per una pagina dinamica html con php PHP 3
X [Apache] Creare sito clone/preservare codice sorgente Apache 7
E [PHP] creare temporary table per dati da xml PHP 2
M [MySQL] CREARE UN LINK SU UN DETERMINATO CAMPO DI UNA TABELLA RISULTATO DI UNA QUERY SQL MySQL 3
P [Photoshop CC] Come posso creare quest'effetto - cerchi concentrici Windows e Software 6
R [PHP] creare pagina profilo per ogni utente PHP 4
V [WordPress] Creare una struttura di articoli da una struttura di cartelle WordPress 1
jonnino2004 Sito .it vale la pena creare una versione in inglese? SEO e Posizionamento 1
F [MS Access] Creare [stringa] da caselle combinate MS Access 0

Discussioni simili