Denna teknik förbättrar webbsidans prestanda genom att endast ladda bilder när de är synliga eller nära användarens skärm.

I dagens snabba digitala värld är det viktigt att ha en högpresterande webbplats. En kritisk aspekt av detta är att se till att dina bilder laddas effektivt. Användare förväntar sig en smidig och snabb surfupplevelse, och den här artikeln visar dig hur du uppnår det.

Du kommer att utforska konceptet med att ladda bilder på lata sätt och lära dig hur du implementerar det med HTML och JavaScript med Intersection Observer API.

Vad är Lazy Loading?

Lazy loading fördröjer laddningen av element, såsom bilder, tills det behövs. Istället för att ladda alla bilder när en sida laddas, laddar lazy loading bara de bilder som för närvarande är synliga eller nära användarens visningsområde. Denna förbättring av webbplatsens prestanda minskar den initiala laddningstiden och sparar bandbredd.

Varför använda Lazy Loading?

Det finns flera övertygande skäl att använda lat inläsning av bilder på din webbplats, till exempel:

instagram viewer
  • Snabbare inledande sidladdning: Lata laddning förhindrar att alla bilder laddas på en gång, vilket minskar den initiala sidladdningstiden. Användare kan börja interagera med din webbplats tidigare, vilket leder till en bättre användarupplevelse.
  • Förbättrad sidrespons: Genom att ladda bilder när användare rullar, förblir webbplatsen responsiv och flytande, vilket säkerställer smidig rullning och navigering utan att behöva vänta på att allt innehåll ska laddas.
  • Bandbreddsbesparingar: Lata laddning sparar bandbredd, vilket gör den idealisk för mobilanvändare och de som har långsamma internetanslutningar. Detta kan minska din webbplats dataförbrukning, till nytta för användarna.
  • SEO-fördelar: Sökmotorer som Google överväg sidhastighet som en rankningsfaktor. Lata lastningsburk positivt påverka din webbplats SEO-prestanda genom att förbättra laddningstiden.

Nu när du förstår varför lat laddning är fördelaktigt, låt oss utforska hur man implementerar det.

Implementera Lazy Loading: HTML-uppmärkningen

För att komma igång måste du ändra din HTML-kod så att den innehåller loading="lat" attribut på din taggar.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

De läser in attribut används i HTML för att kontrollera laddningsbeteendet för element på en webbsida. När du ställer in loading="lat" på en taggen, säger den åt webbläsaren att skjuta upp laddningen av resursen tills den behövs.

För tillfället ser sidan ut så här:

Implementera Lazy Loading: JavaScript-implementeringen

För att ta din lata laddning till nästa nivå, använd Intersection Observer API. Detta API låter dig se när ett element kommer in i eller går ut ur visningsporten.

Grunden bakom att använda Intersection Observer för att ladda bilder på lata sätt är enkel: när sidan laddas hämtas en bild av lägre kvalitet.

Sedan, när den här bilden blir synlig i visningsporten, byter JavaScript ut den mot versionen med högre kvalitet. För att omsätta detta i praktiken, ändra din HTML.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

Här är den primära bildkällan lågkvalitetsversionen och högkvalitetsbilden är den sekundära källan. Då ser sidan ut så här:

Välj sedan alla bilder du vill lata ladda:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Efter det skapar du en IntersectionObserver objekt.

const observer = new IntersectionObserver();

Skicka sedan in posterna (en mängd IntersectionObserverEntry objekt, som representerar de element som observeras och deras skärning med vyporten) och observatören (den IntersectionObserver instansen själv).

const observer = new IntersectionObserver((lazyImages, observer) => { });

Kontrollera sedan om det finns korsningar och byt ut den lågkvalitativa bilden mot den högkvalitativa närhelst elementet skär varandra.

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, initiera observation för varje element.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

Och med det har du implementerat lazy loading med JavaScript.

Överväganden vid lat laddning

När du integrerar lazy loading blir det viktigt att överväga följande aspekter:

  • Tillgänglighet: För att säkerställa tillgänglighet, tillhandahåll alternativ text för bilder med alt attribut. Denna information fungerar som en reliancepunkt för skärmläsare.
  • Webbläsarkompatibilitet: Innan du implementerar lazy loading, bekräfta dess kompatibilitet med olika webbläsare. Inte alla webbläsare utökar stödet för den här funktionen. I vissa fall kan det bli nödvändigt att inkludera en polyfill, särskilt för äldre webbläsare. Ett verktyg som Kan jag använda är en värdefull resurs för att utvärdera webbläsarkompatibilitet.
  • Testning: Den omfattande testningen av implementeringen av lazy loading över ett spektrum av enheter och skärmdimensioner är av största vikt.

Förbättra webbplatsens hastighet och användarupplevelse

När du använder lat laddning för bilder på din webbplats kan du snabba upp din webbplats och förbättra användarupplevelsen. Snabbare laddningstid och smidigare webbupplevelser är vad användarna vill ha, och den här tekniken ger samma sak.

Dessutom får du bättre SEO och sparar på bandbreddsanvändning. Så varför vänta? Börja optimera din webbplats idag med denna enkla men kraftfulla metod.