JavaScript Academy · Oppitunti

Elementtien näkyvyyden tarkkailu

Luokaa tarkkailija ja seuratkaa elementtejä.

Oppitunti 1/413 vaihetta

Elementtien näkyvyyden tarkkailu on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Miksi Intersection Observeria käytetään

Perinteisesti elementin näkymäalueelle saapumisen havaitseminen tarkoitti scroll-tapahtuman kuuntelemista ja getBoundingClientRect-metodin jatkuvaa kutsumista, mikä on hidasta ja aiheuttaa nykimistä.

Intersection Observer API tarkkailee näkyvyyttä tehokkaasti ja asynkronisesti pääsäikeen ulkopuolella.

Observerin luominen

Luot observerin käyttämällä koodia new IntersectionObserver(callback). Takaisinkutsua suoritetaan aina, kun tarkkailtavan elementin näkyvyys ylittää kynnysarvon.

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

Elementin tarkkailu

Aloita kohteen tarkkailu kutsumalla metodia observer.observe(element). Yksi observer voi tarkkailla useita elementtejä.

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

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

isIntersecting-lippu

Jokaisella tietueella on totuusarvoinen isIntersecting-ominaisuus, joka kertoo, onko kohde parhaillaan päällekkäinen juurialueen kanssa (oletuksena näkymäalueen).

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

Tietueen tiedot

Jokainen IntersectionObserverEntry sisältää hyödyllisiä tietoja:

target — tarkkailtava elementti
isIntersecting — leikkaako kohde juurialuetta
intersectionRatio — kuinka suuri osa on näkyvissä (0–1)
boundingClientRect — kohteen suorakulmio

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

threshold-asetus

threshold-asetus määrittää, millä näkyvyyssuhteilla callback suoritetaan. 0 suoritetaan heti, kun yksikin pikseli on näkyvissä; 1 suoritetaan vain, kun kohde on kokonaan näkyvissä.

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]

root-asetus

Oletuksena tarkkailija mittaa näkyvyyttä selaimen näkymäalueeseen nähden. Asettamalla root-arvoksi vieritettävän vanhemman elementin näkyvyyttä voidaan mitata kyseisen säilön sisällä.

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

rootMargin-asetus

rootMargin suurentaa tai pienentää root-elementin rajausta CSS-marginaalien tapaan. Positiiviset arvot suorittavat callbackin aikaisemmin, ennen kuin elementti on oikeasti näytöllä.

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

Tarkkailun lopettaminen

Kutsu observer.unobserve(element), kun haluat lopettaa yhden elementin tarkkailun, tai observer.disconnect(), kun haluat lopettaa kaikkien elementtien tarkkailun. Tämä on tärkeää resurssien vapauttamisen ja kertaluonteisten käynnistysten kannalta.

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

Miksi se on tehokas

Selain laskee leikkauskohdat sisäisesti ja yhdistää ilmoitukset sen sijaan, että JavaScriptiä suoritettaisiin jokaisella vierityskehyksellä. Näin vältetään layoutin turha uudelleenlaskenta ja vieritys pysyy sujuvana myös silloin, kun kohteita on paljon.

Yleisiä käyttötapauksia

Intersection Observer mahdollistaa monia käytännön ominaisuuksia:

Kuvien ja iframe-kehysten lazy loadingin
Loputtoman vierityksen
Vierityksen käynnistämät animaatiot
Mainos- tai sisältönäyttöjen seurannan

Rakennamme seuraavaksi useita näistä.

Pikatesti

Testaa, miten hyvin ymmärrät Intersection Observerin perusteet.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit Intersection Observerin perusteet:

new IntersectionObserver(callback, options) luo tarkkailijan.
observe aloittaa tarkkailun, ja unobserve/disconnect lopettavat sen.
Jokainen merkintä sisältää ominaisuudet isIntersecting ja intersectionRatio.
threshold-, root- ja rootMargin-asetuksilla säädetään, milloin callback suoritetaan.
Se on huomattavasti tehokkaampi kuin vierityskuuntelijat.

Seuraavaksi lataamme kuvat lazy loadingin avulla.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Elementtien näkyvyyden tarkkailu” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Elementtien näkyvyyden tarkkailu”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Elementtien näkyvyyden tarkkailu”?

Luokaa tarkkailija ja seuratkaa elementtejä. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Elementtien näkyvyyden tarkkailu”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy