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.

15 metodi JavaScript per la manipolazione del DOM per gli sviluppatori Web

Come sviluppatore web, è spesso necessario modificare il DOM, il modello a oggetti utilizzato dai browser per specificare la struttura logica delle pagine Web e basato su questa struttura per visualizzare elementi HTML sullo schermo .HTML definisce la struttura DOM predefinita . Tuttavia, in molti casi potresti voler manipolare questo con JavaScript, in genere per aggiungere funzionalità aggiuntive a un sito.

(Consigli tecnici e di design)

5 miti sulla carriera che devono essere sballati

Sei un neo-laureato con gli occhi spalancati che cerca di diventare un membro produttivo della società? O forse sei qualcuno che ha fatto una scelta di carriera sbagliata e ora vuole ricominciare da capo? Sarà una corsa dura visto che sei limitato solo al tuo livello, alle tue abilità e al tuo livello di esperienza, giusto ?Sb

(Consigli tecnici e di design)