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:
spiego la sua funzione:
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:
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
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.
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;
}- 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.
HTML:
<div class="loading-layer"><img src="img/loading.gif"></div>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';
});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>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.
