Share
I denna handledning visar jag dig hur du förbättrar prestandan på dina webbsidor med hjälp av in-view.js. Detta JavaScript-bibliotek rapporterar tillbaka när något har rullat in i visningsporten och hjälper oss att dynamiskt ladda våra bilder som de behövs.
Webbprestanda är viktigt, speciellt om din webbplats riktar sig till utvecklingsländer där anslutningar är långsamma och dataplaner är dyra. Några grundläggande uppgifter som vi gemensamt åtar oss för att förbättra våra webbsidors prestanda är att minimera JavaScript-filer och stylesheets, "gzipping" -tillgångar, komprimera bildstorlekar, varefter vi är ganska mycket uppsatta. Men är vi?
Sidans laddningstid och tidslinjen för webbläsarens inspektörOvanstående inspektörsexempel visar en enda sida som laddar 24 bilder i en mobilstorleksvy med vanlig 3G-hastighet. Och som vi kan se är sidbelastningen klar på cirka elva sekunder! Det här är väldigt långsamt, eftersom vi har att göra med en enkel sida med bara några bilder och ett stilark. Sidan är ännu inte förorenad med annonser eller spårningsskript som vanligtvis lägger till ytterligare ballast på sidan.
Också värt att tänka på är att detta bara är en emulering. Det tar inte ens hänsyn till serverns inställning, latens och andra tekniska hinder. Föreställningen kan vara sämre i verkligheten.
Så hur kan vi förbättra sidans belastningsprestanda?
Först upp, vi har ett antal bilder. Anledningen till att vår sida laddas långsamt beror på att alla bilder överflödar ihop vid första sidladdning. Om du tittar närmare på den föregående bilden ser du inte detta parallellt: ett par bilder börjar bara ladda när andra har gjorts, vilket mossar sidan ner som helhet.
Om vi har ett stort antal bilder på en enda sida kan vi överväga att ladda dessa bilder asynkront och bara när användaren behöver dem. Detta gör att webbläsaren kan slutföra att ladda den visbara sidan utan att behöva vänta på att alla bilder ska återges, vilket i slutändan sparar användarbandbredd.
För att följa med, ta tag i index-starter.html från repo. Det finns också en medföljande css / styles-starter.css som du kan använda också.
Till att börja med måste vi ersätta bildkällorna med en riktigt liten bild, helst kodad till base64 för att undvika extra HTTP-förfrågningar. Vi använder den här bilden som platshållare innan vi tjänar den faktiska bilden. Med detta sagt måste vi också lagra själva bildkällan i en anpassad attribut som heter uppgifter-src.
När du har gjort det här och uppdaterat sidan bör du se att bilderna är tomma och deras dimensioner är inte nödvändigtvis vad dina slutliga bilder ska ha.
Så låt oss fixa stilar.
Bilderna vi vill använda är inställda på 800 med 550 pixlar. Vi delar upp bildhöjden (800px) av bildbredden (500px) och multiplicera detta med 100%. Använd resultatet för att ställa in vadderande topp av bildbehållarens pseudoelement. Slutligen måste vi ställa in bildpositionen till absolut och ställ in maximal höjd till 100%, så det kommer inte att stärka höjden.
figur position: relativ; siffra img topp: 0; vänster: 0; position: absolut; maxhöjd: 100%; figur: före padding-top: 69,25%; // (554/800) * 100%
Vid denna punkt bör bilddimensionerna vara korrekta. Den reella bildkällan finns dock fortfarande i ett anpassat attribut så att webbläsaren faktiskt inte kan hämta några bilder ännu.
Bilden är i lämplig relation, men bilden är fortfarande laddad.Vårt nästa steg kommer att lägga till lite JavaScript som laddar bilden.
För det första måste vi ladda in-view.js till sidan. Som nämnts upptäcker det här lätta biblioteket (vilket inte är beroende av jQuery eller ett kärnbibliotek som Waypoints) om ett element är inuti eller utanför webbläsarens visningsport.
Skapa nu en ny JavaScript-fil där vi ska skriva vår JavaScript och ladda det efter in-view.js, enligt följande:
In-view.js-biblioteket avslöjar InView () funktion som tar en väljare som argumentet. I det här fallet kommer vi att passera figur element; det element som sveper bilderna. Anledningen till att vi väljer wrapper-elementet beror på att vi ska lägga till ett par klasser för att utföra stilövergångar. Detta görs lättare när klassen ligger på omslaget i stället för själva bilden, följaktligen:
InView ( 'siffran')
Därefter använder vi .på() metod för att binda elementet med stiga på händelse för att kontrollera om elementet ligger inom visningsporten. Dessutom exponerar in-view.js också utgång händelse som gör motsatsen; Detta upptäcker när elementet är utanför visningsporten.
Accentsconagua
inView ('figure') .on ('enter', funktion (figur) var img = figure.querySelector ('img'); // 1 om ('undefined'! == typ av img.dataset.src) / 2 figure.classList.add ('is-loading'); // 3 // 4 newImg = ny bild (); newImg.src = img.dataset.src; newImg.addEventListener ('load' figure.innerHTML = "; // 5 figure.appendChild (this); // 6 setTimeout (funktion () figure.classList.remove ('is-loading'); figure.classList.add ('is-loaded') ;, 300);););De stiga på händelse kommer att utlösa en funktion som kommer att göra följande:
figur.uppgifter-src attribut.laddar till omslaget, figur, element.uppgifter-src attribut.laddar klass med är-loaded klass.Som du kan se från ovanstående kod har vi introducerat två nya klasser laddar, och är-loaded. Vi använder laddar klass för att lägga till en spinnaranimering medan bilden laddas. Vi använder sedan är-loaded klass, som namnet antyder, för att lägga över övergångseffekten till bilden när bilden har laddats helt.
figure.is-loaded img animation: fadeIn 0.38s linjär 1s framåt; figure.is-loading position: relative; figure.is-loading: efter innehåll: "; display: block; färg: #ddd; fontstorlek: 30px; textinmatning: -9999em; översvämning: dold; bredd: 1em; höjd: 1em; : 50%, marginal: auto, position: absolut, topp: 50%, vänster: 50%, marginal-vänster: -0.5em; margin-top: -0.5em; transform: translateZ (0); animering: loading 1.7s oändlig lätthet; @keyframes loading 0% transform: rotera (0deg); box-skugga: 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-skugga: 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 % box-shadow: 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: rotera (360deg); boxskugga: 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% opacitet: 1;
Hoppas på det bästa, men planera för det värsta. Så bara om JavaScript på något sätt är inaktiverat (ett sällsynt fall, men helt möjligt) måste vi se till att bilden fortfarande visas. Använd element med bildkällan pekar direkt mot den riktiga bildkällan.
Vi är redo! Uppdatera sidan och om vi inspekterar tidslinjen för nätverk i DevTools kan vi se att sidhastigheten nu förbättras avsevärt eftersom vi bara laddar vad som är synligt för användarna.
Snabbare!Sidbelastningen är nu färdig på endast 1.95s med vanlig 3G-hastighet; mer än en 500% hastighetsförbättring!
I den här handledningen tittade vi på hur man förbättrar sidbelastningen genom att bara göra bilder när användaren ser dem. Denna metod är populärt känd som "lat laddning" och det kan hjälpa din webbplats prestanda enormt.
Det finns många JavaScript-bibliotek och jQuery-plugins som gör det här, varför väljer du in-view.js? Personligen har in-view.js varit det slags skript jag letat efter eftersom det inte försöker göra för mycket. Det hanterar bara en sak och gör det bra. Denna typ av bibliotek ger mer kontroll och större flexibilitet.
Till exempel kan vi inte bara använda in-view.js för att göra lat laddning, men vi kan även använda den för saker som att utföra oändlig bläddring, kanske att visa en flytande prenumerationsblankett när användaren når slutet av sidan (ta titta på demoen för att se det i åtgärd) eller skapa en vertikal tidslinje utan att behöva dra in ännu ett JavaScript-bibliotek. Låt oss veta hur du använder den!
Flytande prenumerationsformulär, animerad till visning när användaren når slutet av sidan