Home-theater-designers
I nutidens hurtige digitale verden er det vigtigt at have en højtydende hjemmeside. Et kritisk aspekt af dette er at sikre, at dine billeder indlæses effektivt. Brugere forventer en jævn og hurtig browsingoplevelse, og denne artikel viser dig, hvordan du opnår det.
MUO Video af dagen RUL FOR AT FORTSÆTTE MED INDHOLD
Du vil udforske konceptet med doven indlæsning af billeder og lære, hvordan du implementerer det ved hjælp af HTML og JavaScript med Intersection Observer API.
Hvad er Lazy Loading?
Doven indlæsning forsinker indlæsningen af elementer, såsom billeder, indtil det kræves. I stedet for at indlæse alle billeder, når en side indlæses, indlæser lazy loading kun de billeder, der i øjeblikket er synlige eller i nærheden af brugerens visningsområde. Denne forbedring af webstedets ydeevne reducerer den indledende indlæsningstid og sparer båndbredde.
Hvorfor bruge Lazy Loading?
Der er flere tvingende grunde til at bruge doven indlæsning af billeder på dit websted, såsom:
- Hurtigere indledende sideindlæsning : Doven indlæsning forhindrer, at alle billeder indlæses på én gang, hvilket reducerer den indledende sideindlæsningstid. Brugere kan begynde at interagere med dit websted hurtigere, hvilket fører til en bedre brugeroplevelse.
- Forbedret siderespons : Ved at indlæse billeder, mens brugerne ruller, forbliver hjemmesiden responsiv og flydende, hvilket sikrer jævn rulning og navigation uden behov for at vente på, at alt indhold indlæses.
- Båndbreddebesparelser : Doven indlæsning sparer båndbredde, hvilket gør den ideel til mobile brugere og dem på langsomme internetforbindelser. Dette kan reducere dit websteds dataforbrug , til gavn for brugerne.
- SEO fordele : Søgemaskiner som Google overveje sidehastighed som en rangeringsfaktor. Doven læssedunk positivt påvirke dit websteds SEO-ydelse ved at forbedre indlæsningstiden.
Nu hvor du forstår, hvorfor doven indlæsning er fordelagtigt, lad os undersøge, hvordan man implementerer det.
Implementering af Lazy Loading: HTML Markup
For at komme i gang skal du ændre din HTML-kode til at inkludere loading='doven' attribut på din tags.
<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>
Det Indlæser attribut bruges i HTML til at kontrollere indlæsningsadfærden af elementer på en webside. Når du indstiller loading='doven' på en tag, fortæller den browseren om at udsætte indlæsningen af ressourcen, indtil den er nødvendig.
hvordan jeg blokerer mig selv fra websteder
I øjeblikket ser siden sådan ud:
Implementering af Lazy Loading: JavaScript-implementeringen
For at tage din dovne indlæsning til næste niveau, brug Intersection Observer API. Denne API lader dig se, når et element kommer ind i eller går ud af viewporten.
Rationalet bag brugen af Intersection Observer til doven indlæsning af billeder er enkel: Når siden indlæses, henter den et billede af lavere kvalitet.
Efterhånden som dette billede bliver synligt i viewporten, skifter JavaScript det ud med versionen af højere kvalitet. For at omsætte dette til praksis skal du ændre din HTML.
<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>
Her er den primære billedkilde lavkvalitetsversionen, og højkvalitetsbilledet er den sekundære kilde. Siden ser så sådan ud:
Vælg derefter alle de billeder, du vil lazy-loade:
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
Derefter skal du oprette en IntersectionObserver objekt.
const observer = new IntersectionObserver();
Indsend derefter posterne (en række af IntersectionObserverEntry objekter, der repræsenterer de elementer, der observeres, og deres skæringspunkt med udsigten) og observatøren (den IntersectionObserver selve instansen).
const observer = new IntersectionObserver((lazyImages, observer) => { });
Dernæst skal du tjekke for skæringspunkter og udskifte billedet af lav kvalitet med det højkvalitetsbillede, når det element krydser hinanden.
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
}
});
});
Til sidst initialiseres observation for hvert element.
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
Og dermed har du implementeret doven indlæsning med JavaScript.
Overvejelser om doven indlæsning
Når du integrerer doven læsning, bliver det vigtigt at overveje følgende aspekter:
- Tilgængelighed : For at sikre tilgængelighed skal du angive alternativ tekst til billeder med alt attribut. Disse oplysninger tjener som et afhængighedspunkt for skærmlæsere.
- Browserkompatibilitet : Før implementeringen af doven indlæsning, bekræft dens kompatibilitet med forskellige browsere. Ikke alle browsere udvider understøttelsen af denne funktion. I visse tilfælde kan medtagelsen af en polyfill blive bydende nødvendig, især for ældre browsere. Et værktøj som Kan jeg bruge er en værdifuld ressource til evaluering af browserkompatibilitet.
- Afprøvning : Den omfattende test af implementeringen af lazy loading på tværs af et spektrum af enheder og skærmdimensioner antager den største betydning.
Forbedring af webstedshastighed og brugeroplevelse
Når du indarbejder doven indlæsning af billeder på dit websted, kan du fremskynde dit websted og forbedre brugeroplevelsen. Hurtigere indlæsningstid og jævnere browsingoplevelser er, hvad brugerne ønsker, og denne teknik leverer det samme.
Derudover vil du nyde bedre SEO og spare på båndbreddeforbruget. Så hvorfor vente? Begynd at optimere dit websted i dag med denne enkle, men kraftfulde metode.