Creare un preloader per il sito.

[MarcoGrazia]

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:

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? ).
• .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:

<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
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:

//  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

//  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 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]

Ciao Marco,
in jquery puoi scrivere cosi

$(function () {
      $('.loading-layer').hide(500);
 });

o cosi

 $(document).ready(function () {
      $('.loading-layer').hide(500);
});

non è necessario metterli entrambi.
Il primo se non ricordo male equivale a

$(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

window.onload = function () {
      $('.loading-layer').hide(500);
}

 

[MarcoGrazia]

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:

$(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à
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ì:

.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]

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]

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:

<body onload="miaFunzione()">

equivale a

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]

conoscete uno script demo di un preloader per un video? tutti i preloader che ho trovato su internet sono solo per immagini.