Molti programmatori ottimizzeranno il codice JavaScript e CSS per velocizzare il caricamento della pagina.
Ma non tutti creano preloader, che danno all'utente l'effetto di un caricamento soggettivamente più veloce.
Metodo numero 1. Economico e allegro.
L'idea è semplice: devi posizionare un'immagine al centro, che mostrerà all'utente che la pagina è ancora in fase di caricamento. Il codice è piuttosto semplice, lo scriviamo subito dopo
- < div id ="preloaderbg" class ="centerbg1" >
- < div class ="centerbg2" >
- < div id ="preloader" >
- < script type ="text/javascript" >
- document .getElementById ("preloaderbg") .style.display = "block";
* Questo codice sorgente è stato evidenziato con Source Code Highlighter.
- .centerbg1 (
- display: nessuno;
- larghezza: 100%;
- altezza: 100%;
- posizione: assoluta;
- in alto: 0px;
- sinistra: 0px;
- indice z: 1000;
- sfondo: url ("/ design / im / texture1.jpg") # 3c363e;
- .centerbg2 (
- posizione: assoluta;
- sinistra: 50%;
- superiore: 50%;
- #preloader (
- massimo: -50%;
- sinistra: -50%;
- posizione: relativa;
- larghezza: 333px;
- altezza: 26px;
- sfondo: url ();
- bordo: solido # edda3d 2px;
Di conseguenza, subito dopo il caricamento, abbiamo un blocco con una barra di avanzamento animata al centro della pagina. Il parametro di overflow deve essere modificato in modo che la barra di scorrimento non venga visualizzata e l'utente non possa scorrere verso il basso e guardare il contenuto della pagina.
Quindi, quando tutto è stato caricato, è necessario rimuovere il preloader e impostare l'overflow su visibile.
* Questo codice sorgente è stato evidenziato con Source Code Highlighter.
- document .body.style.overflow = "visibile";
Ho inserito questa parte del codice in un file con funzioni JS, plreloader1.js
Se crei una barra di avanzamento da un'immagine GIF animata, può risultare troppo pesante, a volte anche più grande della pagina stessa in cui è pubblicata.
Pertanto, è meglio disegnare una striscia (ad esempio, tale), metterla come sfondo per il blocco con il preloader ID e spostare la posizione dello sfondo in base al timer.
* Questo codice sorgente è stato evidenziato con Source Code Highlighter.
E dopo il caricamento, facciamo questo:
* Questo codice sorgente è stato evidenziato con Source Code Highlighter.
- clearInterval (pbPos);
- document .getElementById ("loaderbg") .style.display = "none";
Puoi vedere il risultato del lavoro.
Questo metodo ha degli svantaggi: se imposti l'occultamento del preloader su onload, ad es. durante l'attesa che tutte le immagini vengano caricate, l'utente potrebbe pensare che la pagina si blocchi - in effetti, non accade nulla tranne l'animazione. Se rimani su $ (document) .ready () da jQuery, dopo che il preloader scompare, le immagini verranno caricate solo.
Pertanto, si propone di utilizzare ...
Metodo numero 2. La verità è là fuori, o i Jedi contrattaccheranno.
Per prima cosa, disegniamo 2 corsie di carico: attive e non molto.
Impostiamo quello inattivo come sfondo, e facciamo di quello attivo lo sfondo per il div, per il quale cambieremo la larghezza a seconda della percentuale di caricamento.
* Questo codice sorgente è stato evidenziato con Source Code Highlighter.
- < div id ="loaderbg" class ="centerbg1" >
- < div class ="centerbg2" >
- < div id ="preloader" >
- < img src ="/design/im/progbar_ph.gif" />
- < div id ="progbarfg" >
Progbar_ph.gif è un'immagine alta 1 pixel e larga quanto la nostra barra di scorrimento ( dato esempio bacato senza di esso in IE, e non ho ancora trovato un altro modo per centrare l'allineamento dei div con la barra di avanzamento).
Gli stili sono gli stessi del metodo precedente, tranne che
#progbarfg (larghezza: 0px; sfondo: url ('/ design / im / progbar_fg.png '))
Ora resta da creare un piccolo script che caricherà dinamicamente il contenuto del sito e le immagini. È necessario affinché la barra di avanzamento venga mostrata e modificata anche prima che il framework utilizzato e altri file JS vengano scaricati.
Prendiamo un sito medio costruito interamente in AJAX. Il download funziona in questo modo:
- Il codice HTML è stato caricato
- le immagini iniziano a caricarsi
- poi qualche quadro
- file JS aggiuntivi (anche se è meglio incollare tutto in uno)
- viene lanciata una (o più) funzione che estrae contenuto aggiuntivo.
Ho implementato 2 metodi: il primo è semplice, è incluso in questo modo:
subito prima noi scriviamo:
< script type ="text/javascript" >
dLoader.start ("progbarfg", 333, "count");
Il primo parametro è l'identificativo del blocco con la barra di caricamento attiva come sfondo, il secondo è la larghezza dell'immagine, il terzo parametro è il metodo con cui calcoleremo il peso del contenuto.
Lo script scansiona tutte le immagini sulle pagine e assegna loro un peso pari a 1. Tutti i file JS sono scritti nel suo corpo, come ti dirò di seguito.
Tuttavia, voglio che il peso di ciascuna unità di contenuto non sia un'unità, ma un volume reale in byte. E per le applicazioni AJAX, vorrei caricare immediatamente tutta la grafica.
Per fare ciò, ho scritto uno script PHP che esegue la scansione di una cartella con immagini di progettazione e inserisce l'intera cosa con le dimensioni dei file in un array, opzionalmente comprimendolo.
Quindi dopo aver aggiunto prima successivamente, otterremo una barra di avanzamento che mostrerà l'avanzamento del caricamento di tutti i contenuti sulla pagina, dopodiché scomparirà senza problemi.
* Questo codice sorgente è stato evidenziato con Source Code Highlighter.
Quando tutti i file JS sono stati caricati, vengono avviate le funzioni che si trovano nell'array di richiamo. Se carichiamo il contenuto utilizzando jQuery, la funzione sarà simile a questa:
* Questo codice sorgente è stato evidenziato con Source Code Highlighter.
- funzione fn (richiamata) (
- $ .get ("/", params, function (data) (someHandler (data); eval (callBack);));
Lo script PHP fa quanto segue: inserisce gli script necessari con le loro dimensioni in un array, oltre a immagini e funzioni aggiuntive. Il codice:
* Questo codice sorgente è stato evidenziato con Source Code Highlighter.
- $dati ["js"] = array (
- array ("percorso" => "jquery-1.2.6.min.js", "dimensione" => dimensione del file ($ jsRoot. "/ jquery-1.2.6.min.js")),
- array ("percorso" => "funzioni.js", "dimensione" => dimensione file ($ jsRoot. "/ functions.js"))
- $ data ["im"] = GetFiles ($ imgRoot, vero);
- $ dati ["invoca"] = array (
- "action" => "loadTemplates",
- "size" => GetDirSize (dirname (__ FILE __). "/ design/ajax templates /", false)
- $ data ["jspath"] = "/design / js /";
- $ data ["impath"] = "/design/im";
Dopo che tutte le immagini e i file JS sono stati caricati, viene chiamato l'evento onLoad, che hai specificato nella funzione dLoader.start()
C'è anche un modo per personalizzare il processo di avvio.
Una lezione in cui considereremo il processo di creazione di una pagina precaricata per una pagina. Come preloader, utilizzeremo l'icona Font Awesome o una gif animata che verrà visualizzata durante il caricamento della pagina.
Come creare un preloader per un sito web
La pagina di qualsiasi sito web non si carica istantaneamente quando la apri. Ci vuole un po' di tempo per caricare e visualizzare la pagina, che può variare da 1 a diversi secondi. Per facilitare in qualche modo questo processo (cioè il processo di caricamento della pagina) per l'utente, per questa volta gli può essere mostrata un'immagine animata o un'icona.
Il processo di creazione di un preloader è abbastanza semplice e consiste nel fatto che dobbiamo mostrare un blocco (# prima del caricamento) contenente un'immagine animata o un'icona, subito dopo l'apertura della pagina del sito. E dopo che la pagina è stata completamente caricata, questo blocco (# prima del caricamento) con un'immagine gif animata o un'icona deve essere nascosto all'utente.
Creazione di un preloader per una pagina
Svilupperemo un preloader che avrà l'aspetto di uno sfondo bianco con un'icona animata in 3 passaggi:
1. Creiamo un codice HTML composto da un blocco e un'icona Font Awesome. Questo pezzo di codice deve essere inserito nel documento in modo tale da essere visualizzato prima all'utente, ad es. subito dopo il tag body di apertura:
2. Creare stili CSS per l'elemento div e i (icon).
# prima del caricamento (posizione: fissa; / * posizione fissa del blocco * / sinistra: 0; / * posizione dell'elemento a sinistra * / alto: 0; / * posizione dell'elemento dall'alto * / destra: 0; / * posizione dell'elemento a destra * / bottom : 0; / * posizione dell'elemento in basso * / background: #fff; / * colore di sfondo del blocco * / z-index: 1001; / * posizionalo sopra tutti gli elementi della pagina * /) # before-load i (font-size : 70px; / * icon size * / position: absolute; / * posizione assoluta, posizionata rispetto al suo antenato più vicino * / left: 50% ; / * a sinistra 50% della larghezza del riquadro genitore * / in alto: 50%; / * in alto 50% dell'altezza del blocco genitore * / margine: -35px 0 0 -35px; / * offset dell'icona così che sia centrata */) 3. Aggiungere uno script che nasconda il preloder dopo aver caricato la pagina (cioè quando avviene il caricamento sull'oggetto finestra):
Se desideri utilizzare un'immagine gif animata come indicatore del preloader, devi apportare le seguenti modifiche nei passaggi precedenti:
Rimuovi le classi Font Awesome nel codice HTML:
V Stili CSS apportare le seguenti modifiche (cambiare la regola # prima del caricamento i (..):
# prima del caricamento i (larghezza: 70px; / * larghezza gif * / altezza: 70px; / * altezza gif * / posizione: assoluta; sinistra: 50%; cima: 50%; sfondo: url ("assets /images/img .gif ") no-repeat 50% 50%; / * posizione (url) immagini gif e altri parametri */margine: -35px 0 0 -35px; )
Puoi scaricare immagini gif animate per il tuo sito dalla risorsa http://preloaders.net/ o utilizzare questo archivio.
A nessuno piace aspettare a lungo il caricamento di una pagina del sito, di un dispositivo di scorrimento o di altre informazioni. Ma se non puoi ridurre il tempo di attesa per il sito (ad esempio, è interattivo e tutti gli script devono essere caricati per il corretto funzionamento), devi provare in qualche modo ad alleggerire il tempo di attesa per il download.
Per fare ciò, usa i preloader animati.
Abbiamo selezionato per te 20 preloader interessanti, realizzati con CSS3 e HTML5 o jQuery. Possono migliorare notevolmente l'esperienza dell'utente.
Puoi utilizzare indicatori di caricamento animati per gallerie, slider, blog e altro.
Ecco i bootloader semplici ed eleganti eseguiti con Aiuto CSS... Possono facilmente diventare parte di qualsiasi progetto web: basta copiare e incollare il codice.
E questo è un succoso preloader arcobaleno costruito con CSS. Adatto a progetti giovanili brillanti, dinamici!
E questo indicatore di caricamento funziona bene per i siti Web con un design di carte.
Questo elegante preloader ottiene un effetto magico combinando HTML e CSS. Sembra fantastico e può funzionare meravigliosamente su qualsiasi tipo di sito web.
Animazione dinamica: blocchi colorati che mettono in movimento una pallina.
È un ottimo downloader che può essere integrato con un logo, il nome del sito o uno slogan accattivante. Sarà un forte elemento di branding per il tuo sito web.
Questo fantastico caricatore CSS è adatto a una varietà di progetti e applicazioni. Semplice ed elegante, puoi aggiungerlo al tuo sito web in due clic.
Solo due colori e forme semplici. Ma che animazione interessante! Questo preloader abbellirà qualsiasi tuo sito web.
Questo preloader è ideale per progetti dinamici con design eleganti e minimalisti.
Ancora classico, ancora cubi. Ma l'animazione molto interessante rende questo indicatore di caricamento accattivante.
E questa immagine appartiene alla categoria "Non riesco a staccare gli occhi". È semplicemente affascinante e garantito per migliorare il tempo di attesa per i tuoi utenti.
Se stai cercando indicatori di caricamento in stile Tumblr, dai un'occhiata a questi! Animazione attiva Basato su CSS utilizzando le icone SVG.
Questi sono preloader CSS3 interattivi circolari. Passa il mouse sulle singole aree e osserva un effetto interessante.
Animazione semplice ed elegante in colori pastello. Ideale per i siti web delle donne.
E in questo kit, puoi scegliere l'animazione di caricamento secondo i tuoi gusti. Sarà un orologio o solo cerchi bianchi?
Caricatore semplice con forme rettangolari che ruotano. Facile da implementare su qualsiasi sito.
Ed ecco un'intera raccolta di downloader animati. Ce ne sono molti tra cui scegliere e tutti sono facili da integrare in qualsiasi sito.
Interessante precarico con cerchi. Vengono quindi riorganizzati in un triangolo, quindi in una linea tratteggiata.
Un'altra raccolta di indicatori con diverse animazioni. Tutti i precaricatori sono circolari.
Questa animazione può essere sovrapposta a un logo di testo oa qualsiasi testo, ad esempio il nome di un'azienda o il suo slogan.
Ci auguriamo che tu possa trovare qualcosa di questa raccolta utile per il tuo prossimo progetto!
A seconda del tipo di risorsa web e della quantità di informazioni su di essa, il caricamento del sito può richiedere da pochi millisecondi a un paio di secondi. Durante il processo di caricamento, possono accadere molte cose al sito: il layout può saltare dentro lati diversi, il testo può cambiare stile. C'è un desiderio abbastanza naturale di nascondere tutta questa orgia lontano dagli occhi dei visitatori. Ecco a cosa servono i preloader.
Un preloader è un indicatore di caricamento del sito web. Può essere realizzato sia come immagine gif animata che come barra di caricamento. Ma a prescindere aspetto esteriore preloader, il principio del suo funzionamento sarà lo stesso: mostra l'indicatore di caricamento all'utente il prima possibile e nascondi questo indicatore alla fine del download.
Come viene caricata la pagina web
Prima di creare un indicatore di qualsiasi processo, è necessario comprendere il processo stesso. Il caricamento di pagine Web non fa eccezione. Quindi come si carica una pagina web?
- Il browser invia una richiesta al server.
- Il server inizia a inviare il codice html della pagina al browser. La specificità della trasmissione dei dati su Internet è tale che il browser riceve il codice della pagina non immediatamente, ma in parti.
- Per risparmiare tempo, il browser avvia l'elaborazione del codice html della pagina senza attendere la fine del documento.
- Non appena il browser incontra una risorsa esterna nel codice della pagina, invia una richiesta al server per ottenere questa risorsa. Inoltre, nella maggior parte dei casi, se questa risorsa è un file javascript, l'ulteriore elaborazione della pagina si interrompe finché il codice javascript di questo file non è completamente caricato ed eseguito.
- Non appena il browser ha ricevuto ed elaborato completamente il codice html della pagina (il gestore ha raggiunto la chiusura tag html), il browser genera l'evento DOMContentLoaded, noto anche come DOM Ready.
- Una volta che l'ultima risorsa esterna è stata caricata, il browser genera l'evento window.onload. La pagina è completamente caricata.
Processo di creazione
Ora, comprendendo l'ordine di caricamento di una pagina Web, puoi creare un elenco di attività e condizioni per il nostro preloader. Le mie condizioni per lui sono le seguenti:
- Dovrebbe essere visualizzato il prima possibile, coprendo tutti i contenuti.
- Quando possibile, il display dovrebbe essere indipendente da risorse esterne.
- Dovrebbe essere nascosto non appena il caricamento della pagina è completo. Qualsiasi libreria javascript disponibile può essere utilizzata per nascondere.
Se la tua pagina è praticamente indipendente dalla grafica, al posto di window.onload puoi usare DOM Ready per nascondere il preloader.
Per risolvere il primo problema, mettiamo il seguente codice html subito dopo il tag body di apertura:
Per il nostro preloader, abbiamo bisogno di stili, ma non vogliamo dipendere da file esterni, quindi posizioneremo gli stili direttamente nel documento, da qualche parte all'interno della testa:
# page-preloader (posizione: fisso; left: 0; top: 0; right: 0; bottom: 0; background: # 000; z-index: 100500;) # page-preloader .spinner (larghezza: 32px; altezza: 32px; posizione: assoluta; sinistra: 50%; alto: 50%; sfondo: url ("/ immagini / spinner.gif") no-repeat 50% 50%; margine: -16px 0 0 -16px;)
Sfortunatamente, non potrò abbandonare completamente le risorse esterne, perché abbiamo bisogno di un'immagine gif animata. Ma date le piccole dimensioni dell'immagine stessa, questo è un sacrificio accettabile.
Ora non resta che nascondere il nostro preloader dopo aver caricato la pagina. Qui non siamo più limitati nelle risorse, quindi possiamo usare jQuery:
$ (window) .on ("load", function () (var $ preloader = $ ("# page-preloader"), $ spinner = $ preloader.find (". spinner"); $ spinner.fadeOut (); $ preloader.delay (350) .fadeOut ("lento");));
Pronto! Ora, invece del layout che salta in direzioni diverse, il visitatore vedrà la nostra ordinata schermata di caricamento durante il caricamento della pagina. Una versione funzionante di tale preloader può essere vista sul sito web
