JavaScript Academy · Lektion

Lazy loading af billeder

Indlæs kun billeder, når de bliver synlige.

Lektion 2 af 413 trin

Lazy loading af billeder er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Idéen bag doven indlæsning

Doven indlæsning udskyder download af billeder, indtil de snart ruller ind i visningsområdet. Det sparer båndbredde og gør den første sideindlæsning hurtigere, især på lange sider med mange billeder.

Lagring af den faktiske URL

Tricket er ikke at placere den faktiske billed-URL i src fra starten. Gem den i en data-src-attribut, så browseren ikke downloader billedet endnu.

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

Valg af billeder til doven indlæsning

Find alle de billeder, der skal indlæses dovent. En almindelig konvention er at bruge en fælles klasse eller tilstedeværelsen af data-src.

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

Oprettelse af observatøren

Opret en observatør, hvis tilbagekaldsfunktion indlæser det faktiske billede, når det kommer ind i visningsområdet. Brug rootMargin, så billedet begynder at blive indlæst lidt før, det vises.

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

Indlæsning ved synlighed

Når et billede kommer ind i visningsområdet, skal du kopiere dets data-src til src. Browseren downloader og viser derefter billedet.

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' });

Stop observationen efter indlæsning

Når billedet er indlæst, er der ikke længere behov for at overvåge det. Kald unobserve for at frigive ressourcer og forhindre, at det udløses igen.

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

Start observationen

Gå gennem alle billeder til doven indlæsning, og begynd at overvåge dem. Observatøren klarer resten, mens brugeren ruller.

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

Visning af en pladsholder

Giv brugeren en jævn oplevelse ved at vise en lille sløret pladsholder eller en ensfarvet baggrund, mens det faktiske billede indlæses, og ton det derefter ind ved billedets load-hændelse.

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

Den indbyggede loading-attribut

Moderne browsere understøtter også indbygget doven indlæsning via loading="lazy" på img og iframe. Intersection Observer er stadig nyttig til brugerdefineret styring, animationer eller reserveadfærd.

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

// Observer approach gives more control and effects.

Oprydning i data-src

Efter indlæsningen kan du fjerne attributten data-src for at holde DOM'en ryddelig og undgå forvirring i senere kode eller forespørgsler.

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

Det fulde mønster

Doven indlæsning med Intersection Observer er et enkelt og effektivt mønster: Gem URL'er i data-src, overvåg hvert billede, indsæt den faktiske URL, når billedet kommer ind i visningsområdet, og stop derefter observationen. Resultatet er en hurtigere side, der indlæser billeder lige i tide.

Hurtig kontrol

Test din forståelse af doven indlæsning af billeder.

Besvar den i den interaktive lektion

Opsummering

Du har opbygget doven indlæsning af billeder:

Gem den faktiske URL i data-src.
Overvåg hvert billede med en Intersection Observer.
Når billedet kommer ind i visningsområdet, skal du kopiere data-src til src og kalde unobserve.
Brug rootMargin til at forudindlæse billedet lige før, det bliver synligt.
Indbygget loading="lazy" er et enklere alternativ.

Nu implementerer vi uendelig rulning.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Lazy loading af billeder” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Lazy loading af billeder”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Lazy loading af billeder”?

Indlæs kun billeder, når de bliver synlige. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Lazy loading af billeder”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy