Lag en animert Favicon Loader med JavaScript

Først må vi lage et lerret animasjon som trekker en full sirkel, 100 prosent totalt (dette vil være viktig når vi må øke buen).

 Laste 

Jeg bruker standard favicon størrelse, 16 * 16 piksler, for lerretet. Du kan bruke en størrelse større enn det hvis du vil, men vær oppmerksom på at lerretbildet skal skaleres ned til 16 ² pixelområdet når det brukes som et favicon.

2. Sjekk om støttes

Inne i hendelsesbehandleren på onload(), får vi en referanse for querySelector() [ cv ] ved hjelp av querySelector(), og refererer til 2D-tegningskontekobjektet [ ctx ] ved hjelp av metoden getContext() .

 onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); hvis (!! ctx) {/ * ... * /}}; 

Vi må også sjekke om lerretet støttes av UA ved å sørge for at tegnings kontekstobjektet [ ctx ] eksisterer og ikke er udefinert . Vi legger all koden til lastbegivenheten inn i dette if tilstand.

3. Lag de første variablene

La oss opprette tre globale variabler, s for startvinkelen til buen, tc for idet for setInterval() -timeren, og pct for prosentverdien av den samme timeren . Koden tc = pct = 0 tilordner 0 som startverdien for tc og pct variablene.

 onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); hvis (!! ctx) {s = 1, 5 * Math.PI, tc = pct = 0; }}; 

For å vise hvordan verdien av s ble beregnet, la meg raskt forklare hvordan buevinkler fungerer.

Arc vinkler

Den subtente vinkelen (vinkelen som er sammensatt av de to strålene som definerer en bue) av omkretsen av en sirkel er 2π rad, hvor rad er radian-enhetssymbolet. Dette gjør vinkelen for en kvartbue lik 0, 5π rad .

Går med klokken (standardretningen lyser opp på lerretet) fra høyre posisjon, toppunktet nås etter tre kvartaler, det vil si i en vinkel på 1, 5π rad . Derfor har jeg opprettet variablen s = 1.5 * Math.PI til senere angir s = 1.5 * Math.PI for buene som skal trekkes fra på lerretet.

4. Stil sirkelen

For tegningskontekstobjektet definerer vi lineWidth og lineWidth til sirkelen vi skal tegne i neste trinn. Egenskapen strokeStyle står for fargen sin.

 onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); hvis (!! ctx) {s = 1, 5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; }}; 

5. Tegn sirkelen

Vi legger til en klikkhendelseshåndterer på Load-knappen [ #lbtn ] som utløser en setInterval-timer på 60 millisekunder, som utfører funksjonen som er ansvarlig for å tegne sirkelen [ updateLoader() ] hver 60m til sirkelen er helt trukket.

Metoden setInterval() returnerer et timer ID for å identifisere timeren som er tilordnet tc variabelen.

 onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); hvis (!! ctx) {s = 1, 5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('klikk', funksjon () {tc = setInterval (updateLoader, 60);}); }}; 

6. Opprett updateLoader() tilpasset funksjon

Det er på tide å lage den tilpassede updateLoader() -funksjonen som skal kalles med setInterval() -metoden når knappen klikkes (hendelsen utløses). La meg vise deg koden først, så kan vi gå med forklaringen.

 funksjon updateLoader () {ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); hvis (pct === 100) {clearInterval (tc); komme tilbake; } pct ++; } 

clearRect() fjerner det rektangulære området av lerretet definert av parametrene: (x, y) -koordinatene til øverste venstre hjørne. clearRect(0, 0, 16, 16) sletter alt i 16 * 16 piksler lerretet vi har opprettet.

beginPath() lager en ny sti for tegningen, og metoden stroke() maler på den nylig opprettede banen .

På slutten av updateLoader() -funksjonen økes prosenttalet [ pct ] med 1, og før updateLoader() kontrollerer vi om det tilsvarer 100 . Når det er 100 prosent, blir setInterval() timeren (identifisert av tidtaker-ID, tc ) slettet ved hjelp av metoden clearInterval() .

De tre første parametrene for arc() -metoden er (x, y) koordinatene til buenes senter og dens radius . Den fjerde og femte parameteren representerer start- og sluttvinklene hvor tegningen av lysbuen begynner og slutter.

Vi har allerede bestemt startpunktet for loader-sirkelen, som ligger i vinkelen s, og det vil være det samme i alle iterasjonene .

Endevinkelen øker imidlertid med prosentandelen, vi kan beregne størrelsen på trinnet på følgende måte. Si 1% (verdien 1 av 100) tilsvarer vinkelen α ut av 2π i en sirkel (2π = vinkel på hele omkretsen), da kan det samme skrives som følgende ligning:

 1/100 = a / 2π 

Ved omarrangering av ligningen:

 a = 1 * 2π / 100 a = 2π / 100 

Så er 1% ekvivalent med vinkelen 2π / 100 i en sirkel. Dermed beregnes sluttvinkelen under hvert prosentvis inkrement ved å multiplisere 2π / 100 med prosentverdien . Da blir resultatet lagt til s (startvinkel), slik at buene trekkes fra samme startposisjon hver gang. Dette er grunnen til at vi brukte pct * 2 * Math.PI / 100 + s formel for å beregne sluttvinkelen i pct * 2 * Math.PI / 100 + s ovenfor.

7. Legg til favicon

La oss plassere et favicon-koblingselement i HTML-en seksjon, enten direkte eller via JavaScript.

I funksjonen updateLoader(), henter vi først querySelector() ved hjelp av querySelector(), og tilordner den til lnk variabelen. Da må vi eksportere lerretet bildet hver gang en bue trekkes inn i et kodet bilde ved hjelp av toDataURL(), og tilordne det data URI-innholdet som favicon-bildet . Dette skaper et animert favicon som er det samme som lerretlasteren .

 onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); hvis (!! ctx) {s = 1, 5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('link [rel = "ikon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('klikk', funksjon () {tc = setInterval (updateLoader, 60);}); }}; funksjon updateLoader () {ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png'); hvis (pct === 100) {clearTimeout (tc); komme tilbake; } pct ++; } 

Du kan se på hele koden på Github .

Bonus: Bruk lasteren for asynk hendelser

Når du trenger å bruke denne updateLoader() i forbindelse med en lastingshandling på en nettside, tilordner du updateLoader() -funksjonen som hendelseshåndterer for progress() hendelsen i handlingen .

For eksempel vil JavaScript endres som dette i AJAX :

 onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); hvis (!! ctx) {s = 1, 5 * Math.PI, lnk = document.querySelector ('link [rel = "ikon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; } var xhr = ny XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); }; funksjon updateLoader (evt) {ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (evt.loaded * 2 * Math.PI / evt.total + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png'); } 

I arc() -metoden, erstatt prosentverdien [ pct ] med den loaded egenskapen til hendelsen - det angir hvor mye av filen som er lastet, og i stedet for 100 bruker den total egenskapen til ProgressEvent, som betyr total Beløpet skal lastes inn.

Det er ikke behov for setInterval() i slike tilfeller, da progress() -hendelsen automatisk avfyres når lastingen skrider frem.

Toppverktøy hver SEO skal brukes i 2018

Som SEO konsulent trenger du et bestemt sett med verktøy for å vite nøyaktig hvor konkurrentene står i toppsøkemotorer, hvordan man ser etter effektive søkeord og sporer nye muligheter når de utvikler seg. Det er også dusinvis av aktiviteter, planer og kampanjer som må administreres. I et slikt tilfelle er det alltid en god ide å ha noen nyttige SEO-verktøy til din disposisjon.Så, i denn

(Tekniske og design tips)

Slik laster du unødvendig CSS med Grunt

Bruke et rammeverk, som Bootstrap og Foundation, er en av de raskeste måtene å bygge en responsiv nettside på. Disse rammene har alle de tingene som trengs, inkludert grid- og brukergrensesnittkomponentene for å bygge et anstendig, fungerende nettsted.Men rammene tar sikte på å imøtekomme så mange webscenarier som mulig. Dermed

(Tekniske og design tips)