Share
In deze zelfstudie laat ik u zien hoe u de prestaties van uw webpagina's kunt verbeteren met behulp van in-view.js. Deze JavaScript-bibliotheek rapporteert terug wanneer er iets in de viewport is gescrold en kan ons helpen onze afbeeldingen dynamisch te laden wanneer ze nodig zijn.
Webprestaties zijn belangrijk, vooral als uw website zich richt op ontwikkelingslanden waar de verbindingen traag zijn en dataplannen duur zijn. Een paar basistaken die we vaak ondernemen om de prestaties van onze websites te verbeteren, zijn onder andere het verkleinen van JavaScript-bestanden en stylesheets, het 'gzippen' van items, het comprimeren van afbeeldingsgroottes, waarna we vrijwel klaar zijn. Maar zijn wij?
Paginalaadtijd en de tijdlijn van de browserinspectorHet bovenstaande voorbeeld van een inspecteur toont een enkele pagina die 24 afbeeldingen in een mobiel viewport laadt met een normale 3G-snelheid. En zoals we kunnen zien, is het laden van de pagina voltooid rond de elf seconden! Dit is echt traag gezien het feit dat we te maken hebben met een eenvoudige pagina met niets dan een paar afbeeldingen en een stylesheet. De pagina is nog niet vervuild met advertenties, en er zijn geen trackingscripts die meestal extra ballast toevoegen aan de pagina.
Ook vermeldenswaard is dat dit slechts een emulatie is. Er wordt zelfs geen rekening gehouden met de instellingen van de server, latentie en andere technische hindernissen. De voorstelling zou in werkelijkheid nog slechter kunnen zijn.
Dus hoe kunnen we de prestaties van de pagina laden verbeteren??
Eerst hebben we een aantal afbeeldingen. De reden dat onze pagina langzaam wordt geladen, is omdat alle afbeeldingen bij het laden van de eerste pagina samenvloeien. Als u de vorige afbeelding van dichtbij bekijkt, ziet u dat dit niet tegelijkertijd gebeurt: een aantal afbeeldingen wordt pas geladen wanneer andere worden gerenderd, waardoor de pagina als geheel volloopt.
Als we een groot aantal afbeeldingen op één pagina hebben, kunnen we overwegen deze afbeeldingen te laden asynchroon en alleen wanneer de gebruiker ze nodig heeft. Hierdoor kan de browser het laden van de zichtbare pagina voltooien zonder te moeten wachten totdat alle afbeeldingen zijn weergegeven, waardoor uiteindelijk de bandbreedte van de gebruiker wordt bespaard.
Volg de index-starter.html van de repo om verder te gaan. Er is ook een bijbehorende css / styles-starter.css die je ook kunt gebruiken.
Om te beginnen moeten we de afbeeldingsbronnen vervangen door een hele kleine afbeelding, bij voorkeur gecodeerd in base64 om extra HTTP-verzoeken te vermijden. We gebruiken deze afbeelding als een tijdelijke aanduiding voordat we de werkelijke afbeelding bedienen. Dat gezegd hebbende, moeten we ook de werkelijke afbeeldingsbron opslaan in een aangepast attribuut met de naam data-src.
Zodra u dit hebt gedaan en de pagina hebt vernieuwd, zou u moeten merken dat de afbeeldingen op dit moment leeg zijn en dat hun afmetingen niet noodzakelijkerwijs zijn wat uw uiteindelijke afbeeldingen moeten hebben.
Dus laten we de stijlen repareren.
De afbeeldingen die we willen gebruiken zijn ingesteld op 800 bij 550 pixels. We delen de hoogte van het beeld (800px) door de breedte van de afbeelding (500px), en vermenigvuldig dit met 100%. Gebruik het resultaat om de padding top van het pseudo-element van de afbeeldingscontainer. Ten slotte moeten we de positie van de afbeelding instellen absoluut en stel de maximale hoogte in op 100%, dus het zal de hoogte niet versterken.
figuur positie: relatief; figuur img top: 0; links: 0; positie: absoluut; maximale hoogte: 100%; figure: before padding-top: 69.25%; // (554/800) * 100%
Op dit punt moeten de afbeeldingsdimensies correct zijn. De echte afbeeldingsbron bevindt zich echter nog steeds in een aangepast kenmerk, zodat de browser nog geen afbeeldingen kan ophalen.
Beeld heeft de juiste verhouding, maar de afbeelding is nog geladen.Onze volgende stap is het toevoegen van JavaScript dat de afbeelding zal laden.
Allereerst moeten we in-view.js op de pagina laden. Zoals gezegd, detecteert deze lichtgewicht bibliotheek (die niet afhankelijk is van jQuery of een kernbibliotheek zoals Waypoints) of een element binnen of buiten het kijkvenster van de browser valt.
Maak nu een nieuw JavaScript-bestand waarin we onze JavaScript-code schrijven en achter in-view.js laden, als volgt:
De bibliotheek in-view.js onthult de InView () functie die een selector als argument gebruikt. In dit geval zullen we de figuur element; het element dat de afbeeldingen omhult. De reden dat we het wrapper-element selecteren, is omdat we een paar klassen gaan toevoegen om stijlovergangen uit te voeren - dit is gemakkelijker wanneer de klasse op het wikkelelement staat in plaats van de afbeelding zelf, vandaar:
InView (figuur)
Vervolgens gebruiken we de .op() methode om het element te binden met de invoeren gebeurtenis om te controleren of het element zich binnen de viewport bevindt. Bovendien stelt in-view.js ook de Uitgang evenement dat het tegenovergestelde doet; dit detecteert wanneer het element uit de viewport is.
Accentsconagua
inView ('figuur') .on ('enter', functie (figuur) var img = figure.querySelector ('img'); // 1 if ('undefined'! == typeof img.dataset.src) / / 2 figure.classList.add ('is-loading'); // 3 // 4 newImg = new Image (); newImg.src = img.dataset.src; newImg.addEventListener ('load', function () figure.innerHTML = "; // 5 figure.appendChild (this); // 6 setTimeout (function () figure.classList.remove ('is-loading'); figure.classList.add ('is-loaded') ;, 300);););De invoeren gebeurtenis activeert een functie, die het volgende doet:
figuur.data-src attribuut.Laadt naar de verpakking, figuur, element.data-src attribuut.Laadt klasse met de is geladen klasse.Zoals je kunt zien aan de hand van de bovenstaande code, hebben we twee nieuwe klassen geïntroduceerd Laadt, en is geladen. Wij gebruiken de Laadt klasse om een spinner-animatie toe te voegen terwijl de afbeelding wordt geladen. We gebruiken dan de is geladen klasse, zoals de naam al aangeeft, om het overgangseffect aan de afbeelding toe te voegen wanneer de afbeelding volledig is geladen.
figure.is-loaded img animation: fadeIn 0,38s lineaire 1s vooruit; figure.is-loading position: relative; figure.is-loading: after content: "; display: block; color: #ddd; font-size: 30px; text-indent: -9999em; overflow: hidden; width: 1em; height: 1em; border-radius : 50%; marge: auto; positie: absoluut; top: 50%; links: 50%; margin-links: -0,5em; marge-top: -0,5em; transformatie: translateZ (0); animatie: 1,7s laden oneindig veel; @keyframes loading 0% transform: rotate (0deg); 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; 5%, 95% vakschaduw: 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% vakschaduw: 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% vakschaduw: 0 -0.83em 0 -0,47, -0,338m -0.758em 0 -0,42em, -0,555em -0,617em 0 -0,44m, -0,671em -0,488em 0 -0,46m, -0,749em -0,34m 0 -0,477em; 38 % vakschaduw: 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: roteer (360 graden); vakschaduw: 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% dekking: 1;
Hoop op het beste, maar plan het ergste. Dus voor het geval dat JavaScript op een of andere manier is uitgeschakeld (een zeldzaam geval, maar perfect mogelijk), moeten we ervoor zorgen dat de afbeelding nog steeds wordt weergegeven. Gebruik de element waarvan de afbeeldingsbron onmiddellijk naar de echte afbeeldingsbron wijst.
We zijn er allemaal klaar voor! Vernieuw de pagina en als we de tijdlijn van het netwerk inspecteren in DevTools, kunnen we zien dat de paginasnelheid aanzienlijk is verbeterd, omdat we alleen laden wat zichtbaar is voor de gebruikers.
sneller!Het laden van de pagina is nu voltooid in slechts 1.95s bij een normale 3G-snelheid; meer dan 500% snelheidsverbetering!
In deze zelfstudie hebben we gekeken hoe u paginabelasting kunt verbeteren door afbeeldingen alleen weer te geven wanneer de gebruiker ze ziet. Deze methode staat in de volksmond bekend als 'lui laden' en kan uw websiteprestaties enorm helpen.
Er zijn veel JavaScript-bibliotheken en jQuery-plug-ins die dit doen, dus waarom kiezen voor in-view.js? Persoonlijk is in-view.js het soort script dat ik zocht omdat het niet te veel probeert te doen. Het behandelt slechts één ding en doet het goed. Dit soort bibliotheek geeft meer controle en meer flexibiliteit.
We kunnen bijvoorbeeld niet alleen in-view.js lui laden, maar we kunnen het ook gebruiken voor dingen zoals het uitvoeren van oneindige scrollen, misschien een zwevend inschrijfformulier weergeven wanneer de gebruiker het einde van de pagina bereikt (neem een blik op de demo om dat in actie te zien), of het creëren van een verticale tijdlijn zonder nog een andere JavaScript-bibliotheek in te hoeven trekken. Laat ons weten hoe je het gebruikt!
Zwevend inschrijfformulier, geanimeerd in weergave zodra de gebruiker het einde van de pagina heeft bereikt