JavaScript Academy · Lektion

Overvågning af elementers synlighed

Opret en observer, og overvåg elementer.

Lektion 1 af 413 trin

Overvågning af elementers synlighed er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 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.

Hvorfor Intersection Observer?

Traditionelt betød det at registrere, hvornår et element kommer ind i visningsområdet, at man lyttede efter scroll og konstant kaldte getBoundingClientRect, hvilket er langsomt og hakkende.

Intersection Observer API overvåger synlighed effektivt og asynkront uden for hovedtråden.

Opret en overvåger

Du opretter en overvåger med new IntersectionObserver(callback). Tilbagekaldet køres, hver gang synligheden for et overvåget element krydser en tærskel.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

Overvågning af et element

Kald observer.observe(element) for at begynde at overvåge et mål. Én overvåger kan overvåge mange elementer.

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

Flaget isIntersecting

Hver post har et boolesk isIntersecting, der fortæller dig, om målet i øjeblikket overlapper roden, som som standard er visningsområdet.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

Detaljer om en post

Hver IntersectionObserverEntry indeholder nyttige data:

target — det overvågede element
isIntersecting — om det krydser roden
intersectionRatio — hvor stor en del der er synlig (0 til 1)
boundingClientRect — målelementets rektangel

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

Indstillingen threshold

Indstillingen threshold styrer, ved hvilke synlighedsforhold tilbagekaldsfunktionen udløses. 0 udløser den, så snart én pixel er synlig; 1 udløser den kun, når elementet er helt synligt.

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

Indstillingen root

Som standard måler observatøren i forhold til browserens visningsområde. Indstil root til et rulleligt overordnet element for i stedet at måle synligheden inden for denne beholder.

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

Indstillingen rootMargin

rootMargin udvider eller formindsker rodens afgrænsningsboks ligesom CSS-margener. Positive værdier udløser tilbagekaldet tidligere (før elementet faktisk er på skærmen).

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

Stop observationen

Kald observer.unobserve(element) for at stoppe overvågningen af ét element, eller observer.disconnect() for at stoppe overvågningen af dem alle. Det er vigtigt ved oprydning og engangsudløsere.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

Hvorfor det er effektivt

Browseren beregner skæringspunkter internt og samler meddelelserne i grupper i stedet for at køre din JavaScript-kode ved hver rulleramme. Det undgår gentagne layoutberegninger og holder rulningen jævn, selv med mange målelementer.

Almindelige anvendelser

Intersection Observer bruges til mange funktioner fra virkeligheden:

Doven indlæsning af billeder og iframes
Uendelig rulning
Animationer udløst af rulning
Registrering af annonce- eller indholdsvisninger

Vi bygger flere af dem nu.

Hurtig kontrol

Test din forståelse af det grundlæggende i Intersection Observer.

Besvar den i den interaktive lektion

Opsummering

Du har lært det grundlæggende i Intersection Observer:

new IntersectionObserver(callback, options) opretter en observatør.
observe starter overvågningen, mens unobserve/disconnect stopper den.
Hver post indeholder isIntersecting og intersectionRatio.
threshold, root og rootMargin finjusterer, hvornår den udløses.
Den er langt mere effektiv end lyttefunktioner til rulning.

Nu bruger vi den til at indlæse billeder dovent.

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 “Overvågning af elementers synlighed” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Overvågning af elementers synlighed”, 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 “Overvågning af elementers synlighed”?

Opret en observer, og overvåg elementer. 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 1 af 4.

Hvor lang tid tager lektionen “Overvågning af elementers synlighed”?

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