JavaScript Academy · Les

Afbeeldingen lazy-loaden

Laad afbeeldingen pas wanneer ze verschijnen.

Les 2 van 413 stappen

Afbeeldingen lazy-loaden is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Het idee achter uitgesteld laden

Uitgesteld laden stelt het downloaden van afbeeldingen uit totdat ze bijna in beeld komen tijdens het scrollen. Zo bespaar je bandbreedte en wordt de eerste paginalading sneller, vooral bij lange pagina's met veel afbeeldingen.

De echte URL opslaan

De truc is om de echte afbeeldings-URL aanvankelijk niet in src te zetten. Sla die op in een data-src-attribuut, zodat de browser de afbeelding nog niet downloadt.

// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.

Afbeeldingen voor uitgesteld laden selecteren

Verzamel alle afbeeldingen die uitgesteld moeten worden geladen. Een veelgebruikte afspraak is een gedeelde klasse of de aanwezigheid van data-src.

const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');

De observer maken

Maak een observer waarvan de callback de echte afbeelding laadt zodra die een intersectie heeft. Gebruik rootMargin zodat het laden van de afbeelding iets begint voordat die zichtbaar wordt.

const observer = new IntersectionObserver((entries, obs) => {
  // handle entries here
}, { rootMargin: '100px' });

Laden bij een intersectie

Wanneer een afbeelding een intersectie heeft, kopieer je de waarde van data-src naar src. De browser downloadt de afbeelding dan en geeft die weer.

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // triggers the download
    }
  });
}, { rootMargin: '100px' });

Na het laden stoppen met observeren

Een afbeelding hoeft na het laden niet meer te worden geobserveerd. Roep unobserve aan om bronnen vrij te geven en te voorkomen dat de actie opnieuw wordt uitgevoerd.

if (entry.isIntersecting) {
  const img = entry.target;
  img.src = img.dataset.src;
  obs.unobserve(img); // done watching this one
}

Observeren starten

Loop over elke afbeelding die uitgesteld moet worden geladen en begin die te observeren. De observer doet de rest terwijl de gebruiker scrollt.

lazyImages.forEach(img => observer.observe(img));

Een tijdelijke afbeelding tonen

Zorg voor een soepele ervaring door tijdens het laden van de echte afbeelding een kleine vervaagde tijdelijke afbeelding of een effen kleur te tonen. Laat de echte afbeelding vervolgens verschijnen bij de load-gebeurtenis.

img.addEventListener('load', () => {
  img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;

Het ingebouwde loading-attribuut

Moderne browsers ondersteunen ook ingebouwd uitgesteld laden via loading="lazy" op img en iframe. Intersection Observer blijft nuttig voor aangepaste controle, animaties of terugvalgedrag.

// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">

// Observer approach gives more control and effects.

data-src opruimen

Na het laden kun je het data-src-attribuut verwijderen om de DOM netjes te houden en verwarring in latere code of zoekopdrachten te voorkomen.

img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);

Het volledige patroon

Uitgesteld laden met Intersection Observer is een overzichtelijk en efficiënt patroon: sla URL's op in data-src, observeer elke afbeelding, vervang de URL door de echte URL bij een intersectie en stop daarna met observeren. Het resultaat is een snellere pagina die afbeeldingen precies op tijd laadt.

Korte toets

Toets je begrip van het uitgesteld laden van afbeeldingen.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt afbeeldingen uitgesteld leren laden:

Sla de echte URL op in data-src.
Observeer elke afbeelding met een Intersection Observer.
Kopieer bij een intersectie data-src naar src en roep unobserve aan.
Gebruik rootMargin om vlak voor het verschijnen in beeld vooraf te laden.
Het ingebouwde loading="lazy" is een eenvoudiger alternatief.

Vervolgens implementeren we oneindig scrollen.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Afbeeldingen lazy-loaden” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Afbeeldingen lazy-loaden”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Afbeeldingen lazy-loaden”?

Laad afbeeldingen pas wanneer ze verschijnen. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Afbeeldingen lazy-loaden”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy