JavaScript Academy · leksjon

Observere elementsynlighet

Opprett en observer og følg med på elementer.

Leksjon 1 av 413 trinn

Observere elementsynlighet er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hvorfor Intersection Observer?

Tradisjonelt innebar det å oppdage når et element kommer inn i visningsområdet, at man lyttet etter scroll og stadig kalte getBoundingClientRect, noe som er tregt og hakkete.

Intersection Observer API overvåker synlighet effektivt og asynkront, utenfor hovedtråden.

Opprette en observer

Du oppretter en observer med new IntersectionObserver(callback). Callbacken kjører hver gang synligheten til et overvåket element passerer en terskel.

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

Observere et element

Kall observer.observe(element) for å begynne å overvåke et mål. Én observer kan overvåke mange elementer.

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

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

Flagget isIntersecting

Hver oppføring har en boolsk verdi isIntersecting som forteller om målet for øyeblikket overlapper roten (visningsområdet som standard).

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

Detaljer om oppføringen

Hver IntersectionObserverEntry inneholder nyttige data:

target — det observerte elementet
isIntersecting — om det overlapper roten
intersectionRatio — hvor mye som er synlig (0 til 1)
boundingClientRect — rektangelet til målet

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

Alternativet threshold

Alternativet threshold styrer ved hvilke synlighetsforhold callbacken utløses. 0 utløser den så snart én piksel er synlig, mens 1 utløser den først når elementet er helt synlig.

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]

Alternativet root

Som standard måler observatøren mot nettleserens visningsområde. Angi root til et rullbart overordnet element for å måle synligheten innenfor denne beholderen i stedet.

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

Alternativet rootMargin

rootMargin utvider eller krymper rotens avgrensningsboks, på samme måte som CSS-marger. Positive verdier utløser callbacken tidligere, før elementet faktisk er på skjermen.

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

Stoppe observasjonen

Kall observer.unobserve(element) for å slutte å følge med på ett element, eller observer.disconnect() for å slutte å følge med på alle. Dette er viktig for opprydding og utløsere som bare skal kjøre én gang.

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

Hvorfor det er effektivt

Nettleseren beregner skjæringer internt og samler varsler i grupper i stedet for å kjøre JavaScript-koden Deres for hver rulleramme. Dette unngår unødvendige layoutberegninger og gjør rullingen jevn, selv med mange mål.

Vanlige bruksområder

Intersection Observer brukes i mange funksjoner fra virkeligheten:

Lazy loading av bilder og iframes
Uendelig rulling
Animasjoner som utløses ved rulling
Sporing av annonse- eller innholdsvisninger

Vi skal bygge flere av disse nå.

Rask kontroll

Test forståelsen Deres av det grunnleggende i Intersection Observer.

Besvar den i den interaktive leksjonen

Oppsummering

De har lært det grunnleggende i Intersection Observer:

new IntersectionObserver(callback, options) oppretter en.
observe starter overvåkingen, mens unobserve/disconnect stopper den.
Hver oppføring inneholder isIntersecting og intersectionRatio.
threshold, root og rootMargin finjusterer når callbacken utløses.
Den er langt mer effektiv enn rullelyttere.

Deretter skal vi bruke den til å laste inn bilder trinnvis.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Observere elementsynlighet» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Observere elementsynlighet», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Observere elementsynlighet»?

Opprett en observer og følg med på elementer. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Observere elementsynlighet»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy