Share
I denne veiledningen vil jeg vise deg hvordan du kan forbedre ytelsen til websidene dine ved å bruke in-view.js. Dette JavaScript-biblioteket rapporterer tilbake når noe har rullet inn i visningsporten og vil hjelpe oss med å laste våre bilder dynamisk etter behov.
Web-ytelse er viktig, spesielt hvis nettstedet ditt retter seg mot utviklingsland der forbindelsene er sakte og dataplaner er dyre. Noen få grunnleggende oppgaver som vi vanligvis forplikter oss til å forbedre ytelsen til våre nettsteder, er å redusere JavaScript-filer og stilark, "gzipping" -aktiver, komprimerer bildestørrelser, hvoretter vi er stort sett alle sammen. Men er vi?
Sidetid og tidslinjen for nettleserinspektørenEksemplet over inspektøren viser en enkelt side som laster opp 24 bilder i en mobilstørrelsesport med vanlig 3G-hastighet. Og som vi kan se, er sidelasten ferdig på rundt elleve sekunder! Dette er veldig sakte gitt at vi har å gjøre med en enkel side med bare noen få bilder og et stilark. Siden er ikke forurenset med annonser, eller sporing av skript som vanligvis legger til ytterligere ballast på siden.
Også verdt å huske på, er at dette bare er en emulasjon. Det tar ikke engang hensyn til serveroppsett, latens og andre tekniske hindringer. Ytelsen kan være dårligere i virkeligheten.
Så hvordan kan vi forbedre sidens belastningsytelse?
Først opp, vi har en rekke bilder. Årsaken til at siden vår lastes sakte, er fordi alle bildene er flom i sammen ved første sidebelastning. Hvis du ser nærmere på det forrige bildet, vil du se at dette ikke skjer parallelt: et par bilder begynner bare å lastes når andre blir gjengitt, som maler siden ned som en helhet.
Hvis vi har et stort antall bilder på en enkelt side, kan vi vurdere å laste disse bildene asynkront og bare når brukeren trenger dem. Dette gjør det mulig for nettleseren å fullføre laste siden uten å måtte vente på at alle bildene skal gjengis, og til slutt sparer brukerens båndbredde.
For å følge med, ta tak i indeks-starter.html fra repo. Det er også en medfølgende css / styles-starter.css som du kan bruke også.
Til å begynne med må vi erstatte bildekildene med et veldig lite bilde, helst kodet til base64 for å unngå eventuelle ekstra HTTP-forespørsler. Vi bruker dette bildet som plassholder før vi serverer det faktiske bildet. Når det er sagt, må vi også lagre den faktiske bildekilden i en egendefinert attributt som heter data-src.
Når du har gjort dette og oppdatert siden, bør du finne bildene for øyeblikket blanke og deres dimensjoner er ikke nødvendigvis hva dine endelige bilder skal ha.
Så la oss fikse stilene.
Bildene vi vil bruke er satt til 800 med 550 piksler. Vi deler opp bildehøyde (800px) av bildebredden (500px), og multipliser dette med 100%. Bruk resultatet til å stille inn polstring topp av pseudo-elementet i bildebeholderen. Til slutt må vi sette bildeposisjonen til absolutte og sett maksimal høyde til 100%, så det vil ikke styrke høyden.
figur posisjon: relativ; figur img topp: 0; venstre: 0; posisjon: absolutt; maksimal høyde: 100%; figur: før padding-top: 69,25%; // (554/800) * 100%
På dette tidspunktet skal bildedimensjonene være riktige. Den virkelige bildekilden ligger imidlertid fortsatt i en egendefinert attributt, slik at nettleseren ikke kan hente noen bilder enda.
Bildet er i riktig forhold, men bildet er ennå lastet inn.Vårt neste skritt vil legge til noe JavaScript som vil laste bildet.
For det første må vi laste in-view.js til siden. Som nevnt, registrerer dette lettvektsbiblioteket (som ikke er avhengig av jQuery eller et kjernebibliotek som Waypoints) om et element er inne eller utenfor nettleserens visningsport.
Opprett nå en ny JavaScript-fil der vi skal skrive vår JavaScript og laste den etter in-view.js, som følger:
In-view.js-biblioteket avslører i sikte() funksjon som tar en velger som argumentet. I dette tilfellet vil vi passere figur element; elementet som bryter bildene. Grunnen til at vi velger innpakningselementet er at vi skal legge til et par klasser for å utføre stiloverganger. Dette gjøres lettere når klassen er på innpakningselementet i stedet for selve bildet, og dermed:
Inview ( 'fig')
Deretter bruker vi .på() metode for å binde elementet med Tast inn arrangement for å sjekke om elementet er innenfor visningsporten. I tillegg eksponerer i-view.js også exit hendelse som gjør motsatt; Dette oppdager når elementet er ute av visningsporten.
Accentsconagua
inView ('figure') .on ('enter', funksjon (figur) var img = figure.querySelector ('img'); // 1 hvis ('undefined'! == typeof img.dataset.src) / 2 figure.classList.add ('is-loading'); // 3 // 4 newImg = nytt bilde (); newImg.src = img.dataset.src; newImg.addEventListener ('load' figure.innerHTML = "; // 5 figure.appendChild (this); // 6 setTimeout (funksjon () figure.classList.remove ('is-loading'); figure.classList.add ('er lastet') ;, 300);););De Tast inn hendelsen vil utløse en funksjon som vil gjøre følgende:
figur.data-src Egenskap.er-lasting til omslaget, figur, element.data-src Egenskap.er-lasting klasse med er lastet klasse.Som du kan se fra koden ovenfor har vi introdusert to nye klasser er-lasting, og er lastet. Vi bruker er-lasting klassen for å legge til en spinner animasjon mens bildet lastes inn. Vi bruker deretter er lastet klassen, som navnet tilsier, for å legge overgangseffekten til bildet når bildet er fullstendig lastet.
figure.is-loaded img animasjon: fadeIn 0.38s lineær 1s fremover; figure.is-loading posisjon: relative; figure.is-loading: etter innhold: "; display: blokk; farge: #ddd; skriftstørrelse: 30px; tekstinnrykk: -9999em; overløp: skjult; bredde: 1em; høyde: 1em; : 50%, margin: auto; posisjon: absolutt; topp: 50%; venstre: 50%; margin-left: -0.5em; margin-top: -0.5em; transform: translateZ (0); animasjon: loading 1.7s uendelig enkelt; @keyframes laster 0% transform: roter (0deg); boks-skygge: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 5%, 95% box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 10%, 59% box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; 20% box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; 38 % boks-skygge: 0 -0.83em 0 -0.4em, -0.377em -0. 74em 0 -0,42em, -0,645em -0,522em 0 -0,44em, -0,775em -0,297em 0 -0,46em, -0,82em -0,09em 0 -0,477em; 100% transform: roter (360deg); boks-skygge: 0 -0,83em 0 -0,4em, 0 -0,83em 0 -0,42em, 0 -0,83em 0 -0,44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0-0,477em; @keyframes fadeIn 0% opacity: 0; 100% opacity: 1;
Håper det beste, men planlegg det verste. Så bare hvis JavaScript på en eller annen måte er deaktivert (et sjeldent tilfelle, men perfekt), må vi sørge for at bildet fortsatt vises. Bruke element med bildekilden peker umiddelbart til den virkelige bildekilden.
Vi er alle satt! Oppdater siden, og hvis vi inspiserer nettverkslinjen i DevTools, kan vi se at sidens hastighet nå forbedres betydelig siden vi bare laster inn det som er synlig for brukerne..
Raskere!Siden belastningen er nå fullført på bare 1.95s med vanlig 3G-hastighet; mer enn en forbedring på 500% hastighet!
I denne opplæringen så vi på hvordan du kan forbedre sidebelastningen ved å bare vise bilder når brukeren ser dem. Denne metoden er populært kjent som "lat lasting", og det kan bidra til at nettstedet ditt blir ypperlig.
Det er mange JavaScript-biblioteker og jQuery-plugins som gjør dette, så hvorfor velger du in-view.js? Personlig har in-view.js vært det slags skript jeg har latt etter siden det ikke prøver å gjøre for mye. Den håndterer bare en ting og gjør det bra. Denne typen bibliotek gir mer kontroll og større fleksibilitet.
For eksempel kan vi ikke bare bruke in-view.js til å utføre lat lasting, men vi kan også bruke den til ting som å utføre uendelig rulle, og kanskje vise en flytende abonnementskjema når brukeren når slutten av siden (ta se på demoen for å se det i aksjon), eller opprett en vertikal tidslinje uten å måtte trekke inn enda et annet JavaScript-bibliotek. Gi oss beskjed om hvordan du bruker den!
Flytende abonnementskjema, animert til visning når brukeren når slutten av siden