Legg til din egen side Load Progress Bar med Pace.js

For noen brukere kan en fremdriftslinje være en veldig nyttig ting. Det informerer dem om hvor mye de er nærmere for å fullføre oppgavene. Normalt brukes dette til å gi en mer brukervennlig opplevelse. Når du åpner en nettside i favorittbrowseren din, er det allerede en standard fremdriftslinje i nettleserfliken for å se om siden er fullstendig lastet.

Med Pace.js, kan du nå inkludere sidelinjens fremdriftslinje i din egen side.

Pace.js er et javascriptbibliotek for å lage en nydelig sidelastfremdriftslinje på et nettsted. Fremdriften opprettes automatisk ved å inspisere ajax-forespørsler, dokumenttilstandsstand, hendelsesløpsslag (viser at javascript utføres) og eksistensen av bestemte elementer på en side.

Når en pushState eller en pushState hendelse finner sted, blir også fremdriftslinjen startet på nytt.

Starter

Pace.js er veldig enkelt å implementere. Den kan brukes selv uten å ha jQuery-bibliotek på nettstedet ditt. Du må bare innlemme pace.js og et CSS-tema etter eget valg så tidlig som mulig i dokumentet ditt:

Det er det! Du er ferdig, og nettstedet ditt har nå en nydelig side lasting av fremdriftslinjen.

konfigurasjon

Stoffvis, det er ikke behov for ytterligere konfigurasjoner som Pace.js kommer med full automatisering. Men hvis standardinnstillingen ikke tilfredsstiller dine behov, kan du også bruke din egen konfigurasjon.

For å tilpasse videre, er det to enkle metoder du kan velge. Først ved å inkludere konfigurasjon inni window.paceOption som følgende.

En annen metode er hvor du enkelt kan legge til data-pace-options inne i et skript, og definer deretter konfigurasjonen og ring pace.js-ressursen slik.

Du finner den komplette listen over tilgjengelige konfigurasjoner du kan bruke på kildesiden.

Endelig tanke

Denne plugin kommer med en rekke ferdige temaer . For å se hele listen og demo av temaene, kan du gå videre til plugin-siden. Hvis disse temaene ikke passer deg, kan du enkelt lage din egen. Ved hjelp av et plugin som Pace.js, trenger du ikke å bekymre deg for vanskeligheter med å implementere en fremdriftslinje for lasting av siden til nettstedet ditt.

Hva er nytt i jQuery 3 - 10 kuleste funksjoner

jQuery 3.0, den nye store utgivelsen av jQuery ble endelig utgitt. Nettutvikler-fellesskapet ventet på dette viktige trinnet siden oktober 2014, da jQuery-teamet begynte å jobbe med den nye hovedversjonen frem til nå juni 2016, når den endelige utgivelsen er ute.Utgivelsesnotatet lover en slankere og raskere jQuery, med bakoverkompatibilitet i tankene. I

(Tekniske og design tips)

20 Gratis Photoshop-handlinger Alle designere må ha

Automatiserte skript sparer tid og forbedrer arbeidsflyten i alle kreative felt. Adobe-produkter som Photoshop tilbyr skript kalt handlinger som automatiserer en prosess flere ganger ved å klikke på en knapp. Det finnes eksklusive Photoshop-handling nettsteder, men mange av dem imøtekomme fotografer.Je

(Tekniske og design tips)