Guida [GUIDA] Creare un preloader

[Biuni]

Creare un PRELOADER​

Che cosa è un Preloader?

Il preloader è una GIF, un animazione CSS, una semplice immagine o addirittura una scritta fissa che viene visualizzata prima del completo caricamento di un sito web.


A che cosa serve un Preloader?

Durante l'apertura di alcuni siti web molto pesanti i tempi di attesa possono essere di diversi secondi (sopratutto se si naviga da uno smartphone con poca linea e senza 3G) e la pagina bianca o il caricamento a "pezzi" del sito web è davvero brutto e fastidioso alla vista. Inserendo un preloader eviteremo ciò perchè vedremo quest'ultimo fino a che il caricamento della pagina non sarà completato.


Come faccio a crearlo?

DEMO PRELOADER


CODICI PRELOADER​

Come posso personalizzare il preloader?

Basterà conoscere un pò di basi CSS e modificare quella porzione di codice per poter personalizzare il preloader in qualsiasi modo.
Se volete cambiare solamente l'immagine vi basterà cambiare l'URL che si trova qui

background-image:url(http://i.imgur.com/MSzY4fK.gif);

con l'URL dell'immagine che volete utilizzare!


Potete trovare qui la GUIDA PER CREARE PRELOADER CON PHOTOSHOP o in alternativa potete trovare qui un ricco archivio di GIF già pronte all'uso.


PS: Funzionante anche su mobile.

Guida scritta interamente da Biuni per Inforge.net |Vietata la riproduzione|​

 

[Vasilij]

Creare un PRELOADER​

Che cosa è un Preloader?

Il preloader è una GIF, un animazione CSS, una semplice immagine o addirittura una scritta fissa che viene visualizzata prima del completo caricamento di un sito web.


A che cosa serve un Preloader?

Durante l'apertura di alcuni siti web molto pesanti i tempi di attesa possono essere di diversi secondi (sopratutto se si naviga da uno smartphone con poca linea e senza 3G) e la pagina bianca o il caricamento a "pezzi" del sito web è davvero brutto e fastidioso alla vista. Inserendo un preloader eviteremo ciò perchè vedremo quest'ultimo fino a che il caricamento della pagina non sarà completato.


Come faccio a crearlo?








Come posso personalizzare il preloader?

Basterà conoscere un pò di basi CSS e modificare quella porzione di codice per poter personalizzare il preloader in qualsiasi modo.
Se volete cambiare solamente l'immagine vi basterà cambiare l'URL che si trova qui

background-image:url(http://www.sstnet.com.br/img/preload.gif);

con l'URL dell'immagine che volete utilizzare!

Potete trovare qui un ricco archivio di GIF già pronte all'uso.


PS: Funzionante anche su mobile.

Molto utile grazie, non ci avevo mai pensato su come farlo, ma penso che si possa fare benissimo anche senza Jquery..

 

[NarcoSlayer]

Stavo pensando adesso di creare una guida su come farlo con photoshop...

 

[Biuni]

Stavo pensando adesso di creare una guida su come farlo con photoshop...

Bè se la fai credo che le possiamo tranquillamente linkare tra di loro!

 

[NarcoSlayer]

Bè se la fai credo che le possiamo tranquillamente linkare tra di loro!

Certo... domani mattina la faro

 

[Biuni]

Molto utile grazie, non ci avevo mai pensato su come farlo, ma penso che si possa fare benissimo anche senza Jquery..

Jquery viene usato per controllare il caricamento della pagina. Altrimenti come fai?

 

[Webber]

Credo intendeva dire che si potrebbe usare direttamente js al posto di usare jquery

 

[Biuni]

Credo intendeva dire che si potrebbe usare direttamente js al posto di usare jquery

Ah bè sisi certo ma perchè complicarci la vita quando c'è già chi ci ha fatto una libreria apposita :lal:

 

[Webber]

Beh i motivi possono essere due: studio o performance. Caricare jquery solo per avere il preloader è come usare un framework php per fare un sito statico.

 

[Biuni]

Beh i motivi possono essere due: studio o performance. Caricare jquery solo per avere il preloader è come usare un framework php per fare un sito statico.

Sisi ma visto che il problema della performance non c'è in questo caso (dato che si deve aspettare il caricamento della pagina) non vedo il motivo di perchè non utilizzare jQuery.
Fatto sta che tutto si può fare in più modi, sbagliati o giusti che siano!

 

[Scanetatore]

Sisi ma visto che il problema della performance non c'è in questo caso (dato che si deve aspettare il caricamento della pagina) non vedo il motivo di perchè non utilizzare jQuery.
Fatto sta che tutto si può fare in più modi, sbagliati o giusti che siano!

Per come la vedo io, similmente a quanto dice Webber, il tuo ragionamento è errato. Se stai aspettando il caricamento delle risorse di una pagina per via del peso, non puoi far aspettare ulteriormente per una libreria come jQuery, che per quanto leggera richiede tempo su reti molto lente. E questo per mostrare il preloader, che dovrebbe essere la cosa più leggera.

In un paio di giorni ho buttato giù questo codice (purtroppo ho tempi limitatissimi): http://codepen.io/anon/pen/gbmGqm. La parte JS può essere minimizzata già a qualcosa del genere:

function pr(e){0>=e?(p.style.display="none",document.getElementById("content").style.display="block"):(p.style.opacity=e,window.setTimeout(function(){pr(e-.05)},100))}var p;document.addEventListener("DOMContentLoaded",function(){p=document.getElementById("preloader"),pr(1)});

Che personalmente ritengo migliore come tempi di caricamento per un preloader. Sono certo che si potrebbe limare ulteriormente ma sono abbastanza soddisfatto del risultato.

In ogni caso complementi per l'impegno nel creare le guide.

 

[Biuni]

Per come la vedo io, similmente a quanto dice Webber, il tuo ragionamento è errato. Se stai aspettando il caricamento delle risorse di una pagina per via del peso, non puoi far aspettare ulteriormente per una libreria come jQuery, che per quanto leggera richiede tempo su reti molto lente. E questo per mostrare il preloader, che dovrebbe essere la cosa più leggera.

In un paio di giorni ho buttato giù questo codice (purtroppo ho tempi limitatissimi): http://codepen.io/anon/pen/gbmGqm. La parte JS può essere minimizzata già a qualcosa del genere:

function pr(e){0>=e?(p.style.display="none",document.getElementById("content").style.display="block"):(p.style.opacity=e,window.setTimeout(function(){pr(e-.05)},100))}var p;document.addEventListener("DOMContentLoaded",function(){p=document.getElementById("preloader"),pr(1)});

Che personalmente ritengo migliore come tempi di caricamento per un preloader. Sono certo che si potrebbe limare ulteriormente ma sono abbastanza soddisfatto del risultato.

In ogni caso complementi per l'impegno nel creare le guide.

Correggimi se sbaglio. Tu in questo modo dai solo un tempo di attesa non controlli che la pagina carichi per poi dare il via all'effetto opacity, giusto?
Se è giusto quello che ho capito io in questo modo non è un preloader ma un semplice DIV messo li con un timeout prima di farlo scomparire che non attende il totale caricamento ma solo un tempo prefissato, quindi in caso di connessione lenta potrebbe impiegarci ancora di più del tempo che tu metti.

Grazie per i complimenti

 

[Scanetatore]

Correggimi se sbaglio. Tu in questo modo dai solo un tempo di attesa non controlli che la pagina carichi per poi dare il via all'effetto opacity, giusto?
Se è giusto quello che ho capito io in questo modo non è un preloader ma un semplice DIV messo li con un timeout prima di farlo scomparire che non attende il totale caricamento ma solo un tempo prefissato, quindi in caso di connessione lenta potrebbe impiegarci ancora di più del tempo che tu metti.

Grazie per i complimenti

C'è un listener che aspetta il caricamento del DOM della pagina (non tutte le risorse) e il suo utilizzo, anche da quello che ho potuto vedere in velocità dal source di jQuery, è uguale a quello che fai tu con la funzione load(). Se avessi usato ready() probabilmente avrei creato direttamente gli elementi in JS in modo da caricare il prima possibile, ma a questo punto ci sarebbero diversi test da fare.

Comunque sì, sarebbe da rivedere qualcosina, dovrei fare dei test con una connessione lenta e tante risorse.

 

[alcatrak]

Bella guida