Home-theater-designers
In de snelle digitale wereld van vandaag is het hebben van een krachtige website essentieel. Een cruciaal aspect hiervan is ervoor te zorgen dat uw afbeeldingen efficiënt worden geladen. Gebruikers verwachten een soepele en snelle browserervaring, en dit artikel laat zien hoe u dat kunt bereiken.
chrome://settings/content/flashMUO-video van de dag SCROLL OM DOOR TE GAAN MET INHOUD
Je onderzoekt het concept van lui laden van afbeeldingen en leert hoe je dit kunt implementeren met behulp van HTML en JavaScript met de Intersection Observer API.
Wat is lui laden?
Lui laden vertraagt het laden van elementen, zoals afbeeldingen, totdat ze nodig zijn. In plaats van alle afbeeldingen te laden wanneer een pagina wordt geladen, laadt lazyloading alleen de afbeeldingen die momenteel zichtbaar zijn of zich in de buurt van het weergavegebied van de gebruiker bevinden. Deze verbetering van de websiteprestaties vermindert de initiële laadtijd en bespaart bandbreedte.
Waarom Lazy Loading gebruiken?
Er zijn verschillende dwingende redenen om lui laden van afbeeldingen op uw website te gebruiken, zoals:
- Sneller laden van de eerste pagina : Lazy Loading voorkomt dat alle afbeeldingen in één keer worden geladen, waardoor de initiële laadtijd van de pagina wordt verkort. Gebruikers kunnen sneller interactie met uw site beginnen, wat leidt tot een betere gebruikerservaring.
- Verbeterde paginaresponsiviteit : Door afbeeldingen te laden terwijl gebruikers scrollen, blijft de website responsief en vloeiend, waardoor u soepel kunt scrollen en navigeren zonder dat u hoeft te wachten tot alle inhoud is geladen.
- Bandbreedtebesparing : Lazy Load bespaart bandbreedte, waardoor het ideaal is voor mobiele gebruikers en mensen met een trage internetverbinding. Dit kan verminder het dataverbruik van uw website , wat de gebruikers ten goede komt.
- SEO-voordelen : Zoekmachines zoals Google beschouw paginasnelheid als een rankingfactor. Lui laden kan een positieve invloed hebben op de SEO-prestaties van uw site door de laadtijd te verbeteren.
Nu u begrijpt waarom lui laden nuttig is, gaan we kijken hoe u dit kunt implementeren.
Lazy Loading implementeren: de HTML-opmaak
Om aan de slag te gaan, moet u uw HTML-code aanpassen zodat deze de laden = 'lui' attribuut op uw labels.
<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>
De bezig met laden attribuut wordt in HTML gebruikt om het laadgedrag van elementen op een webpagina te controleren. Wanneer u instelt laden = 'lui' op een tag, vertelt het de browser om het laden van de bron uit te stellen totdat deze nodig is.
Op dit moment ziet de pagina er als volgt uit:
Lazy Loading implementeren: de JavaScript-implementatie
Gebruik de Intersection Observer API om uw lazyloading naar een hoger niveau te tillen. Met deze API kunt u zien wanneer een element de viewport binnenkomt of verlaat.
De reden achter het gebruik van de Intersection Observer voor het lui laden van afbeeldingen is eenvoudig: wanneer de pagina wordt geladen, wordt een afbeelding van lagere kwaliteit opgehaald.
Wanneer deze afbeelding vervolgens zichtbaar wordt in de viewport, ruilt JavaScript deze om voor de versie van hogere kwaliteit. Om dit in de praktijk te brengen, past u uw HTML aan.
<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>
Hier is de primaire afbeeldingsbron de versie van lage kwaliteit en de afbeelding van hoge kwaliteit de secundaire bron. De pagina ziet er dan als volgt uit:
Selecteer vervolgens alle afbeeldingen die u wilt lazyloaden:
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
Maak daarna een Kruispuntwaarnemer voorwerp.
const observer = new IntersectionObserver();
Geef vervolgens de vermeldingen door (een array van IntersectionObserverEntry objecten, die de waargenomen elementen vertegenwoordigen en hun snijpunt met de viewport) en waarnemer (de Kruispuntwaarnemer exemplaar zelf).
const observer = new IntersectionObserver((lazyImages, observer) => { });
Controleer vervolgens op kruispunten en verwissel de afbeelding van lage kwaliteit voor de afbeelding van hoge kwaliteit wanneer dat element elkaar kruist.
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
}
});
});
Initialiseer ten slotte de observatie voor elk element.
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
En daarmee heb je lazyloading met JavaScript geïmplementeerd.
Overwegingen bij lui laden
Bij het integreren van lazyloading is het essentieel om rekening te houden met de volgende aspecten:
- Toegankelijkheid : Om de toegankelijkheid te garanderen, geeft u alternatieve tekst voor afbeeldingen op met de alles attribuut. Deze informatie dient als vertrouwenspunt voor schermlezers.
- Browsercompatibiliteit : Controleer vóór de implementatie van lazyloading de compatibiliteit ervan met verschillende browsers. Niet alle browsers bieden ondersteuning voor deze functie. In bepaalde gevallen kan het opnemen van een polyfill noodzakelijk worden, vooral voor oudere browsers. Een hulpmiddel als Kan ik gebruiken is een waardevolle bron voor het evalueren van browsercompatibiliteit.
- Testen : Het uitgebreide testen van de lazyload-implementatie op een spectrum van apparaten en schermafmetingen is van het allergrootste belang.
Verbetering van de websitesnelheid en gebruikerservaring
Wanneer u lazyloading voor afbeeldingen op uw website opneemt, kunt u uw site versnellen en de gebruikerservaring verbeteren. Een snellere laadtijd en soepelere browse-ervaringen zijn wat gebruikers willen, en deze techniek levert hetzelfde op.
hoe maak je een .bat
Bovendien profiteert u van betere SEO en bespaart u op bandbreedtegebruik. Dus waarom wachten? Begin vandaag nog met het optimaliseren van uw website met deze eenvoudige maar krachtige methode.