Aggiungi la tua pagina di caricamento barra di caricamento con Pace.js

Per alcuni utenti, una barra di avanzamento può essere una cosa molto utile. Li informa di quanto sono più vicini al completamento dei compiti. Normalmente, questo è usato per dare un'esperienza più user-friendly. Quando apri una pagina Web sul tuo browser preferito, c'è già una barra di avanzamento predefinita nella scheda del browser per vedere se la pagina è stata caricata completamente.

Con Pace.js, ora puoi incorporare la barra di avanzamento del caricamento della pagina nella tua pagina.

Pace.js è una libreria javascript per creare una barra di avanzamento del caricamento di una bella pagina in un sito web. Lo stato di avanzamento viene stabilito automaticamente esaminando le richieste Ajax, lo stato del documento pronto, il ritardo del loop di eventi (mostrando che javascript è in esecuzione) e l'esistenza di elementi specifici in una pagina.

Quando si verifica un evento di navigazione ajax o pushState, la barra di avanzamento verrà riavviata nuovamente.

Iniziare

Pace.js è molto facile da implementare. Può essere utilizzato anche senza la libreria jQuery nel tuo sito. Devi solo inserire pace.js e un tema CSS a tua scelta il prima possibile nel tuo documento:

Questo è tutto! Il gioco è fatto e ora il tuo sito ha una barra di avanzamento per il caricamento della pagina.

Configurazione

Per quanto riguarda la sostanza, non è necessaria alcuna configurazione aggiuntiva poiché Pace.js è dotato di automazione completa. Ma se l'impostazione predefinita non soddisfa le tue esigenze, puoi usare anche la tua configurazione.

Per personalizzare ulteriormente, ci sono due semplici metodi che puoi scegliere. Innanzitutto, includendo la configurazione all'interno di window.paceOption come la seguente.

Un secondo metodo è dove puoi facilmente aggiungere data-pace-options all'interno di un tag script, quindi definire la configurazione e chiamare la risorsa pace.js in questo modo.

È possibile trovare l'elenco completo delle configurazioni disponibili che è possibile utilizzare nella pagina di origine.

Pensiero finale

Questo plugin include una serie di temi pronti per l'uso . Per vedere la lista completa e la demo dei temi, puoi andare sul sito del plugin. Se quei temi non ti si addicono, puoi facilmente crearne uno tuo. Con l'aiuto di un plugin come Pace.js, ora non devi preoccuparti delle difficoltà nell'implementazione di una barra di avanzamento della pagina di caricamento nel tuo sito.

SEO Today - Una breve panoramica [Infografica]

Cosa ti ricordano i pinguini, i panda e i colibrì? Se possiedi un blog o un sito web, questi sono gli aggiornamenti "animali" dell'algoritmo di Google che aiutano a modellare lo stato dei contenuti che vedi online oggi. Si può dire molto riguardo alla SEO che probabilmente saresti in grado di riempire un'infinità di libri con le informazioni disponibili.ID

(Consigli tecnici e di design)

Le 10 reti jQuery più affascinanti

(Consigli tecnici e di design)