Laiska lataus IntersectionObserverilla
Siirrä kuvien ja sisällön latausta, kunnes ne tulevat näkymään
Laiska lataus IntersectionObserverilla on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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 HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Natiivin loading="lazy"-ominaisuuden lisäksi
Natiivi lazy loading kattaa <img>- ja <iframe>-elementit. Kaikkiin muihin kohteisiin — taustakuviin, videoihin, raskaisiin komponentteihin ja kolmannen osapuolen pienoisohjelmiin — IntersectionObserver on oikea työkalu työn lykkäämiseen, kunnes elementti on lähellä näkymäaluetta.
Toimintamalli
Merkitkää lykättävät elementit data-src-attribuutilla, joka sisältää todellisen lähteen, ja renderöikää pieni paikanvaraaja. Tarkkailkaa jokaista elementtiä; kun se tulee näkyviin, vaihtakaa data-src src-attribuutiksi (tai aktivoikaa elementti muulla tavoin) ja lopettakaa tarkkailu, jotta takaisinsoittoa ei suoriteta enää koskaan.
<img class="lazy" data-src="/photo.jpg" alt="Photo" width="800" height="600">
<script>
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
}
}, { rootMargin: "200px" });
document.querySelectorAll(".lazy").forEach((img) => observer.observe(img));
</script>Taustakuvien lazy loading
CSS:n background-image-ominaisuutta ei voi ladata lazy loading -menetelmällä natiivisti. Kun elementti tulee näkyviin, asettakaa el.style.backgroundImage = `url("${el.dataset.bg}")` tai lisätkää CSS-luokka, joka määrittää background-image-ominaisuuden. Kuva alkaa latautua sillä hetkellä.
Videoiden lazy loading
Näkymän alapuolella oleville videoille ei aluksi määritetä src-attribuuttia eikä source-elementtejä. Kun video tulee näkyviin, lisätkää <source>-tagit ja kutsukaa video.load(). Muuten videon metatietoja saatetaan ladata heti, ennen kuin käyttäjä vierittää lähellekään elementtiä.
Kolmannen osapuolen pienoisohjelmat
Sosiaalisen median upotukset, kommenttipienoisohjelmat ja chat-komentosarjat voivat ladata megatavuja dataa. Kun elementti tulee näkyviin, tuokaa pienoisohjelman alustusskripti dynaamisesti: await import("/embed.js"). Kustannus syntyy vasta, kun käyttäjä todella vierittää kyseisen osion kohdalle.
Iframe-elementin lazy loading (loading="lazy"-ominaisuuden lisäksi)
Natiivi iframe-elementin lazy loading lataa silti iframe-dokumentin. Raskaille upotuksille, kuten kartoille ja videosoittimille, käyttäkää ”facade”-mallia: näyttäkää paikanvaraajakuva ja korvatkaa se oikealla iframe-elementillä napsautuksen tai näkymäalueelle saapumisen yhteydessä. Tämä pienentää sivun alkuperäistä kokoa huomattavasti.
rootMargin esilatausta varten
rootMargin: "200px" aloittaa lataamisen 200 pikseliä ennen kuin elementti saapuu näkymäalueelle. Säätäkää arvo vieritysnopeuden perusteella: liian pieni arvo saa paikanvaraajat näkymään nopeiden vieritysten aikana, kun taas liian suuri arvo kumoaa lazy loadingin hyödyn lataamalla kaiken.
Tarkkailun lopettaminen käynnistyksen jälkeen
Kutsukaa aina observer.unobserve(element) lazy loadingin käynnistyttyä. Muuten takaisinsoitto suoritetaan joka kerta, kun elementti palaa näkymäalueelle — tämä kuluttaa suoritinaikaa ja voi aiheuttaa virheitä, jos aktivointi ei ole idempotentti.
Varatkaa tilaa
Asettakaa lazy loadingilla ladattaville kuville leveys ja korkeus sekä säilöille vähimmäiskorkeus. Ilman määritettyjä mittoja sivu asettuu uudelleen sisällön latautuessa — tämä aiheuttaa häiritseviä vierityshyppyjä ja heikentää Cumulative Layout Shift -arvoa.
Varatoteutus ilman JavaScriptiä
Täydellisen progressiivisen parantamisen varmistamiseksi ympäröikää lazy loading -elementti <noscript>-elementillä, joka sisältää oikean src-arvon: <noscript><img src="/photo.jpg"></noscript>. JavaScriptiä käyttämättömät käyttäjät saavat kuvan ladattuna heti, kun taas JavaScriptiä käyttävät saavat lazy loading -version. Yhdistäkää tämä asianmukaiseen data-src-merkintään.
Monien elementtien eräkäsittely
Yksi tarkkailijainstanssi voi tarkkailla tehokkaasti satoja elementtejä. Älkää luoko yhtä tarkkailijaa elementtiä kohden. Luokaa yksi jaettu tarkkailija halutuilla asetuksilla ja rekisteröikää kukin kohde observe()-kutsulla.
Yhdistäminen natiiviin loading="lazy"-ominaisuuteen
Käyttäkää <img>-elementeille ensisijaisesti loading="lazy"-ominaisuutta ja varatkaa IntersectionObserver tapauksiin, joita natiivi lazy loading ei kata. Ne toimivat hyvin yhdessä: natiivi ominaisuus käsittelee näkymän alapuolella olevat kuvat, IntersectionObserver taustakuvat, komponentit ja muut mukautetut lataajat.
Tietotesti
Miksi on tärkeää kutsua observer.unobserve(element) sen jälkeen, kun lazy loadingilla ladattava elementti on aktivoitu?
Yhteenveto
IntersectionObserver laajentaa lazy loadingin natiivin <img loading="lazy">-ominaisuuden ulkopuolelle taustakuviin, videoihin, kolmannen osapuolen pienoisohjelmiin ja dynaamisiin komponenttien tuonteihin. Käyttäkää data-src-paikanvaraajia, vaihtakaa lähde elementin tullessa näkyviin ja lopettakaa tarkkailu aktivoinnin jälkeen. Esiladatkaa sisältöä rootMargin-asetuksella, varatkaa tilaa width- ja height-arvoilla, tarjotkaa noscript-varatoteutus ja yhdistäkää ratkaisu natiiviin lazy loadingiin aina, kun se soveltuu.
Opi HTML 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
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Laiska lataus IntersectionObserverilla” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Laiska lataus IntersectionObserverilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Laiska lataus IntersectionObserverilla”?
Siirrä kuvien ja sisällön latausta, kunnes ne tulevat näkymään Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Laiska lataus IntersectionObserverilla”-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ä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML 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
- IntersectionObserver API ja kynnysarvot
- Laiska lataus IntersectionObserverilla
- Infinite Scroll -toteutus
- Vieritykseen sidottujen animaatioiden määrittäminen