Hoe afbeeldingen traag laden met HTML en JavaScript
In de snelle digitale wereld van vandaag is het essentieel om een website te hebben die goed presteert. Een cruciaal aspect hiervan is ervoor zorgen dat je afbeeldingen efficiënt laden. Gebruikers verwachten een soepele en snelle browse-ervaring en dit artikel laat zien hoe je dat kunt bereiken.
Verdiep je in het begrip efficiënt laden van afbeeldingen, bekend als lui laden, en ontdek de implementatie ervan met behulp van HTML en JavaScript in combinatie met de Intersection Observer API.
Wat is lui laden?
Lazy loading is een optimalisatietechniek waarbij het laden van visuele componenten, met name afbeeldingen, wordt uitgesteld totdat ze nodig zijn voor weergave. In tegenstelling tot het vooraf laden van alle afbeeldingen bij aankomst van een webpagina, haalt deze methode selectief afbeeldingen op die zich op dat moment in de nabijheid of het gezichtsveld van de kijker bevinden. Door de website efficiënter te maken, wordt de tijd die nodig is voor initialisatie verkort en wordt er netwerkcapaciteit voor gegevensoverdracht bespaard.
Waarom Lazy Loading gebruiken?
Er bestaan inderdaad meerdere overtuigende redenen om lazy loading van visuele inhoud op een webplatform te gebruiken, inclusief maar niet beperkt tot:
De implementatie van technieken voor lui laden kan de prestaties van webpagina’s aanzienlijk verbeteren door het laden van afbeeldingen uit te stellen totdat ze nodig zijn voor weergave. Deze aanpak vermindert niet alleen de initiële laadtijd van de pagina, maar stelt gebruikers ook in staat om sneller met hun interactie met de website te beginnen, wat uiteindelijk resulteert in een verbeterde algemene gebruikerservaring.
De website behoudt een hoge mate van responsiviteit door het dynamisch laden van afbeeldingen terwijl de gebruiker scrollt, waardoor vertraging bij het scrollen en navigeren wordt voorkomen die kan ontstaan door te wachten tot alle inhoud volledig is geladen. Deze aanpak zorgt voor naadloze interactie met de inhoud van de site, terwijl de algehele prestaties behouden blijven.
Lazy loading is een webdesigntechniek waarbij het laden van niet-essentiële inhoud wordt uitgesteld tot het nodig is, waardoor de initiële laadtijd van een webpagina wordt verkort. Door bandbreedte te besparen via deze methode, worden websites beter geoptimaliseerd voor mobiele apparaten en personen met langzamere internetverbindingen. Als gevolg hiervan kan lui laden het totale dataverbruik van een site aanzienlijk verlagen, wat uiteindelijk een gebruiksvriendelijkere ervaring oplevert voor bezoekers.
Optimaliseren voor zoekmachineranking is cruciaal in het huidige digitale landschap, en een belangrijk aspect dat hierbij een belangrijke rol speelt, zijn de websiteprestaties. Zoekmachines zoals Google houden rekening met factoren zoals paginasnelheid bij het bepalen welke websites prominent op hun resultatenpagina’s worden weergegeven.In deze context is aangetoond dat lui laden een positief effect heeft op SEO-prestaties, omdat het de laadtijden kan verbeteren, wat uiteindelijk leidt tot een betere gebruikerservaring en betere zoekmachinerankings.
In het licht van de bovengenoemde voordelen zal ik het proces voor het implementeren van lui laden in je webapplicatie toelichten.
Het implementeren van lui laden: De HTML-opmaak
Om het proces te starten, moet de HTML-opmaak worden aangepast door het kenmerk “loading=‘lazy’” op te nemen in de tag van een afbeelding.
<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>
Het kenmerk laden, dat wordt gebruikt binnen de context van HTML-opmaak, dient om het laadgedrag te regelen van verschillende elementen die op een webpagina worden weergegeven. Door “loading=‘lazy’” op te geven binnen een img-tag, wordt de browser geïnstrueerd om het ophalen van de bijbehorende bron uit te stellen tot het moment dat deze nodig is voor rendering of verdere verwerking.
Momenteel ziet de webpagina er als volgt uit:
Lazy Loading implementeren: De JavaScript-implementatie
Om de functionaliteit van je techniek voor lui laden te verbeteren, kun je overwegen de Intersection Observer API te gebruiken. Deze krachtige tool maakt het mogelijk om elementen te monitoren wanneer ze de viewport van de gebruiker binnenkomen of verlaten, waardoor een nauwkeurigere en efficiëntere benadering van het laden van inhoud mogelijk wordt.
De onderliggende reden voor het gebruik van de Intersection Observer in verband met het lui laden van afbeeldingen is relatief eenvoudig. Wanneer de webpagina voor het eerst wordt geladen, wordt een versie met verlaagde resolutie van een afbeelding opgehaald in plaats van alle afbeeldingen met hoge resolutie die niet direct zichtbaar zijn voor de gebruiker.
Zodra de lage-resolutie thumbnail verschijnt binnen het weergavegebied van de browser, vervangt JavaScript deze door een meer gedetailleerde en hoge-definitie versie. Om deze functionaliteit te implementeren, moet je enkele aanpassingen maken in je HTML-code.
<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>
Het primaire visuele element op deze webpagina is een afbeelding in lage resolutie, terwijl de weergave van superieure kwaliteit als hulpbron dient. Bijgevolg presenteert de site zichzelf op zo’n manier dat zowel de lage-resolutie als de high-fidelity afbeeldingen tegelijkertijd worden gebruikt.
Kies om te beginnen de visuele elementen die lui worden geladen voor een efficiëntere gebruikerservaring:
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
Maak daarna eenIntersectionObserverobject.
const observer = new IntersectionObserver();
We zullen inderdaad een array leveren met een verzameling van IntersectionObserverEntry objecten, die informatie bevatten over de gemonitorde elementen en hun snijpunten met het visuele gebied, naast de IntersectionObserver instantie die dient als ons observatie-instrument.
const observer = new IntersectionObserver((lazyImages, observer) => { });
Vervolgens gaan we op zoek naar eventuele snijpunten en vervangen we het beeld van lagere kwaliteit door de versie van hogere kwaliteit wanneer het betreffende element in contact komt.
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
}
});
});
Tot slot initialiseren we de observatie voor elk element.
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
Door JavaScript te gebruiken, heb je inderdaad met succes een strategie van lui laden uitgevoerd.
Uw browser ondersteunt de videotag niet.
Overwegingen bij lui laden
Om lui laden effectief te implementeren in een webapplicatie, is het essentieel om rekening te houden met verschillende kritieke factoren. Deze omvatten het overwegen hoe en wanneer gegevens moeten worden geladen, evenals het bepalen welke componenten lui moeten worden geladen. Daarnaast moet er zorgvuldig worden gekeken naar de impact van lui laden op de prestaties en de gebruikerservaring, vooral met betrekking tot netwerklatentie en beschikbare bandbreedte. Het is ook belangrijk om ervoor te zorgen dat de inhoud die lui wordt geladen nog steeds onafhankelijk kan functioneren zodra deze is geladen, zonder afhankelijk te zijn van andere bronnen die nog niet zijn opgehaald. Tot slot moeten er geschikte foutafhandelingsmechanismen worden ingesteld om mogelijke problemen af te handelen die zich kunnen voordoen tijdens het lazy loading-proces.
Om de toegankelijkheid te verbeteren, is het essentieel om een alternatieve beschrijving van afbeeldingen op te nemen met behulp van het “alt”-attribuut. Deze extra tekst staat bekend als een betrouwbare referentie voor gebruikers van schermlezers en zorgt ervoor dat visueel gehandicapten ook betekenis kunnen halen uit de inhoud van de afbeelding.
⭐ Browsercompatibiliteit: Controleer voor de implementatie van lui laden of het compatibel is met verschillende browsers. Niet alle browsers bieden ondersteuning voor deze functie. In bepaalde gevallen kan het noodzakelijk zijn om een polyfill toe te voegen, vooral voor oudere browsers. Een hulpmiddel zoals CanIUse is een waardevolle bron voor het evalueren van browsercompatibiliteit.
Het belang van een allesomvattende evaluatie van het mechanisme voor lui laden, dat verschillende apparaten en beeldschermformaten omvat, kan niet genoeg worden benadrukt.
De snelheid van websites en de gebruikerservaring verbeteren
Het opnemen van lui laden voor afbeeldingen in een website is een effectieve manier om de prestaties te verbeteren en een betere gebruikerservaring te bieden.Door laadtijden te verkorten en soepele navigatie mogelijk te maken, voldoet deze aanpak aan de verwachtingen van het hedendaagse veeleisende publiek dat snelheid en naadloze interactie belangrijk vindt.
Het gebruik van deze aanpak verbetert niet alleen de zoekmachineoptimalisatie, maar bespaart ook bandbreedte. Dus waar wacht je nog op? Begin meteen met het stroomlijnen van je site door gebruik te maken van deze gebruiksvriendelijke maar krachtige tactiek.