Loputon vieritys
Ladatkaa lisää sisältöä käyttäjän vierittäessä.
Loputon vieritys on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
Mitä loputon vieritys on
Loputon vieritys lataa lisää sisältöä automaattisesti, kun käyttäjä lähestyy luettelon loppua, eikä käyttäjän tarvitse napsauttaa Seuraava sivu -painiketta. Sosiaalisissa syötteissä ja hakutuloksissa käytetään usein tätä tekniikkaa.
Sentinel-malli
Siistein tekniikka käyttää sentineliä: tyhjää elementtiä, joka sijoitetaan luettelon loppuun. Kun sentinel tulee näkyviin, seuraava sisältöerä haetaan ja lisätään luetteloon.
// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div> <!-- trigger element -->Sentinelin tarkkailu
Kohdista Intersection Observer sentineliin. Koska se sijaitsee viimeisen kohteen jälkeen, sen näkyminen tarkoittaa, että käyttäjä on saavuttanut luettelon lopun.
const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);Latauksen käynnistäminen
Tarkista callbackissa isIntersecting. Kun sen arvo on tosi, lataa seuraava tietosivu.
function onIntersect(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadMoreItems();
}
});
}Sivunumeron seuranta
Säilytä sivulaskuria, jotta jokaisella latauskerralla haetaan seuraava osa sisällöstä. Kasvata laskurin arvoa onnistuneen haun jälkeen.
let page = 1;
async function loadMoreItems() {
const items = await fetchPage(page);
appendItems(items);
page++;
}Kaksoislatausten estäminen
Callback voidaan suorittaa toistuvasti. Käytä loading-lippua, jotta uutta hakua ei aloiteta, kun edellinen on vielä käynnissä.
let loading = false;
async function loadMoreItems() {
if (loading) return;
loading = true;
const items = await fetchPage(page);
appendItems(items);
page++;
loading = false;
}Uusien kohteiden lisääminen
Lisää haetut kohteet ennen sentineliä, jotta se pysyy kasvavan luettelon lopussa ja voi käynnistää seuraavan latauksen.
function appendItems(items) {
const feed = document.getElementById('feed');
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item.title;
feed.appendChild(li);
});
}Pysähtyminen sisällön loppuessa
Kun palvelin ei palauta enää tietoja, katkaise tarkkailija, jotta se lopettaa latausyritykset. Näin estetään loputtomat tyhjät pyynnöt.
const items = await fetchPage(page);
if (items.length === 0) {
observer.disconnect(); // no more data
return;
}Miksi rootMargin auttaa
Suuri rootMargin-arvo, kuten 200px, aloittaa lataamisen ennen kuin käyttäjä todella saavuttaa lopun. Näin uudet kohteet ilmestyvät saumattomasti ilman näkyvää taukoa.
new IntersectionObserver(onIntersect, {
rootMargin: '300px' // begin loading well before the end
});Saavutettavuushuomioita
Loputon vieritys voi vangita näppäimistöä tai näytönlukijaa käyttävät käyttäjät ja piilottaa alatunnisteen. Harkitse manuaalista Lataa lisää -painiketta varatoiminnoksi ja ilmoita uudesta sisällöstä hienovaraisesti ARIA live -alueiden avulla.
Koko työnkulku
Intersection Observerilla toteutettu loputon vieritys toimii näin: sijoita sentinel, tarkkaile sitä, lataa ja lisää tietoja sen tullessa näkyviin, estä kaksoislataukset ja katkaise tarkkailu, kun tiedot loppuvat. Vierityksen koordinaatteja ei tarvitse laskea.
Pikatesti
Testaa, miten hyvin ymmärrät loputtoman vierityksen.
Kertaus
Rakensit loputtoman vierityksen:
- Sijoita sentinel-elementti luettelon jälkeen.
- Tarkkaile sitä Intersection Observerilla.
- Hae ja lisää seuraava sivu leikkauskohdassa.
- Estä kaksoishaun käynnistyminen
loading-lipun avulla. - Katkaise tarkkailu, kun tiedot loppuvat.
Seuraavaksi toteutamme vierityksen käynnistämät animaatiot.
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
Usein kysytyt kysymykset
Onko oppitunti ”Loputon vieritys” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Loputon vieritys”. 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 ”Loputon vieritys”?
Ladatkaa lisää sisältöä käyttäjän vierittäessä. 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 3/4.
Kuinka kauan ”Loputon vieritys”-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
- Elementtien näkyvyyden tarkkailu
- Kuvien laiska lataus
- Loputon vieritys
- Vierityksen käynnistämät animaatiot