Hur man lazy loadar bilder med HTML och JavaScript
I dagens snabba digitala värld är det viktigt att ha en högpresterande webbplats. En viktig aspekt av detta är att se till att dina bilder laddas effektivt. Användarna förväntar sig en smidig och snabb surfupplevelse, och den här artikeln visar hur du kan uppnå detta.
Fördjupa dig i begreppet effektiv bildladdning, så kallad lazy loading, och upptäck hur det implementeras med hjälp av HTML och JavaScript i kombination med Intersection Observer API.
Vad är lazy loading?
Lazy loading är en optimeringsteknik som skjuter upp laddningen av visuella komponenter, särskilt bilder, tills de blir nödvändiga för visning. I motsats till att förladda alla bilder när en webbsida öppnas, hämtar denna metod selektivt bilder som för närvarande finns i betraktarens närhet eller synfält. Genom att förbättra webbplatsens effektivitet minskar den tid som behövs för initialisering och sparar nätverksdataöverföringskapacitet.
Varför använda Lazy Loading?
Det finns flera övertygande skäl till att använda lazy loading för visuellt innehåll på en webbplattform, bland annat följande:
Implementering av lazy loading-tekniker kan avsevärt förbättra webbsidors prestanda genom att skjuta upp laddningen av bilder tills de behövs för visning. Detta tillvägagångssätt minskar inte bara den initiala laddningstiden för sidan utan gör det också möjligt för användare att påbörja sin interaktion med webbplatsen snabbare, vilket i slutändan resulterar i en förbättrad övergripande användarupplevelse.
Webbplatsen håller en hög nivå av responsivitet genom att dynamiskt ladda bilder när användaren scrollar, vilket eliminerar eventuell fördröjning i scrollning och navigering som kan uppstå om man väntar på att allt innehåll ska laddas helt i förväg. Detta tillvägagångssätt möjliggör sömlös interaktion med webbplatsens innehåll samtidigt som dess övergripande prestanda bevaras.
Lazy loading är en webbdesignteknik som innebär att man skjuter upp laddningen av oväsentligt innehåll tills det behövs, och därmed minskar den initiala laddningstiden för en webbsida. Genom att spara bandbredd med denna metod kan webbplatser optimeras bättre för mobila enheter och personer med långsammare internetanslutningar. Som ett resultat kan lazy loading avsevärt minska en webbplats totala dataförbrukning, vilket i slutändan ger en mer användarvänlig upplevelse för besökare.
Att optimera för sökmotorranking är avgörande i dagens digitala landskap, och en viktig aspekt som spelar en viktig roll i detta avseende är webbplatsens prestanda. Sökmotorer som Google tar hänsyn till faktorer som sidhastighet när de bestämmer vilka webbplatser som ska visas framträdande på deras resultatsidor.I detta sammanhang har lazy loading visat sig ha en positiv effekt på SEO-prestanda på grund av dess förmåga att förbättra laddningstiderna, vilket i slutändan leder till förbättrad användarupplevelse och bättre övergripande sökmotorranking.
Mot bakgrund av de ovannämnda fördelarna vill jag nu förklara hur du implementerar lazy loading i din webbapplikation.
Implementering av lazy loading: HTML-markup
För att starta processen är det nödvändigt att ändra HTML-markup genom att införliva attributet “loading=‘lazy’” i taggen för en bild.
<body>
<main>
<section>
<img src="./image-one-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-two-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-three-high.jpg" alt="" loading="lazy" />
</section>
</main>
</body>
Attributet loading, som används i samband med HTML-markup, används för att reglera laddningsbeteendet för olika element som visas på en webbsida. Genom att ange “loading=‘lazy’” i en img-tagg instrueras webbläsaren att fördröja hämtningen av den associerade resursen tills den blir nödvändig för rendering eller vidare bearbetning.
För närvarande har webbsidan följande layout:
Implementering av Lazy Loading: JavaScript-implementeringen
För att förbättra funktionaliteten i din lazy loading-teknik kan du överväga att använda Intersection Observer API. Detta kraftfulla verktyg gör det möjligt att övervaka element när de går in i eller ut ur användarens vyport, vilket ger en mer exakt och effektiv metod för innehållsladdning.
Den bakomliggande anledningen till att använda Intersection Observer i samband med lazy loading av bilder är relativt okomplicerad. När webbsidan först laddas hämtar den en version av en bild med reducerad upplösning istället för alla högupplösta bilder som inte är omedelbart synliga för användaren.
När den lågupplösta miniatyrbilden visas i webbläsarens visningsområde ersätter JavaScript den med en mer detaljerad och högupplöst version. För att kunna implementera denna funktion måste du göra några justeringar i din HTML-kod.
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-one-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-one-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-two-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-two-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-three-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-three-high.jpg"
/>
</section>
Det primära visuella elementet på denna webbsida är en lågupplöst avbildning, medan den högkvalitativa avbildningen fungerar som en hjälpresurs. Följaktligen presenteras webbplatsen på ett sådant sätt att den innehåller både låg- och högupplösta bilder samtidigt.
Börja med att välja de visuella element som ska laddas långsamt för en mer effektiv användarupplevelse:
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
Skapa sedan ettIntersectionObserver-objekt.
const observer = new IntersectionObserver();
Vi ska tillhandahålla en matris som består av en samling IntersectionObserverEntry objekt, som innehåller information om de övervakade elementen samt deras skärningspunkter med den visuella regionen, tillsammans med IntersectionObserver instans som fungerar som vårt observationsverktyg.
const observer = new IntersectionObserver((lazyImages, observer) => { });
Därefter kommer vi att undersöka om det finns några skärningspunkter och ersätta bilden med lägre kvalitet med versionen med högre kvalitet när respektive element kommer i kontakt.
const observer = new IntersectionObserver((lazyImages, observer) => {
lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
lazyImage.src = lazyImage.dataset.src; // Swap the image source
observer.unobserve(lazyImage); // Stop observing this image
}
});
});
Slutligen initialiseras observationen för varje element.
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
Genom att använda JavaScript har du framgångsrikt genomfört en strategi för lazy loading.
Din webbläsare stöder inte videotaggen.
Överväganden om lazy loading
För att effektivt kunna implementera lazy loading i en webbapplikation är det viktigt att ta hänsyn till flera kritiska faktorer. Det handlar bland annat om hur och när data ska laddas, samt vilka komponenter som ska laddas med lazy loading. Dessutom måste man noga överväga hur lazy loading påverkar prestanda och användarupplevelse, särskilt när det gäller nätverkslatens och tillgänglig bandbredd. Det är också viktigt att se till att det lazy-loadade innehållet fortfarande kan fungera självständigt när det har laddats, utan att förlita sig på andra resurser som ännu inte har hämtats. Slutligen måste lämpliga felhanteringsmekanismer införas för att hantera eventuella problem som kan uppstå under lazy loading-processen.
För att förbättra tillgängligheten är det viktigt att inkludera en alternativ beskrivning av bilder genom att använda “alt”-attributet. Denna extra text är känd som en referens för skärmläsaranvändare och säkerställer att synskadade personer också kan få mening från det innehåll som presenteras i bilden.
⭐ Kompatibilitet med webbläsare: Innan du implementerar lazy loading bör du bekräfta att den är kompatibel med olika webbläsare. Inte alla webbläsare har stöd för den här funktionen. I vissa fall kan införandet av en polyfill bli absolut nödvändigt, särskilt för äldre webbläsare. Ett verktyg som CanIUse är en värdefull resurs för att utvärdera webbläsarkompatibilitet.
Betydelsen av att genomföra en allomfattande utvärdering av lazy loading-mekanismen, som omfattar olika enheter och skärmstorlekar, kan inte överskattas.
Förbättra webbplatsens hastighet och användarupplevelse
Att integrera lazy loading för bilder på en webbplats är ett effektivt sätt att förbättra dess prestanda och ge en förbättrad användarupplevelse.Genom att minska laddningstiderna och underlätta smidig navigering uppfyller detta tillvägagångssätt förväntningarna hos dagens kräsna publik som prioriterar snabbhet och sömlös interaktion.
Att använda detta tillvägagångssätt kommer inte bara att förbättra sökmotoroptimeringen utan också spara bandbreddskonsumtion. Så vad väntar du på? Börja strömlinjeforma din webbplats på en gång genom att använda denna användarvänliga men ändå potenta taktik.