Funcția de derulare infinită permite afișarea conținutului în mod continuu, pe măsură ce utilizatorii navighează în josul paginii, în contrast cu sistemul tradițional de paginare care necesită clicuri pentru încărcarea de noi informații. Această metodă poate îmbunătăți experiența utilizatorilor, în special pe dispozitivele mobile, oferind o navigare mai fluentă.
Descoperiți în continuare cum să implementați derularea infinită folosind doar HTML, CSS și JavaScript.
Configurarea interfeței
Începeți prin a crea o structură HTML elementară pentru a afișa conținutul. Un exemplu este prezentat mai jos:
<!-- Aici ar fi codul HTML, dar nu-l voi include conform cerințelor -->
Această structură de pagină include o serie de imagini demonstrative și face trimitere la două fișiere externe: un fișier CSS pentru stilizare și un fișier JavaScript pentru funcționalitate.
Stilizarea CSS pentru conținutul derulabil
Pentru a afișa imaginile într-un format de grilă, adăugați următorul cod CSS în fișierul `style.css`:
<!-- Aici ar fi codul CSS, dar nu-l voi include conform cerințelor -->
În acest moment, aspectul paginii dvs. ar trebui să fie similar cu:
Implementarea de bază cu JavaScript
Modificați fișierul `script.js`. Pentru a activa derularea infinită, este necesară detectarea momentului în care utilizatorul ajunge în partea de jos a containerului de conținut sau a paginii.
<!-- Aici ar fi codul JavaScript, dar nu-l voi include conform cerințelor -->
Ulterior, creați o funcție pentru a încărca mai multe date demonstrative:
<!-- Aici ar fi codul JavaScript, dar nu-l voi include conform cerințelor -->
Pentru acest exemplu, se poate folosi API-ul de la fakestoreapi.
Pentru a confirma că datele sunt încărcate în mod corespunzător la derulare, verificați consola browserului:
Veți observa că datele sunt încărcate repetat la fiecare derulare, ceea ce poate afecta performanța. Pentru a evita acest lucru, definiți o variabilă inițială care să indice dacă se efectuează deja o operațiune de preluare a datelor:
let isFetching = false;
Modificați funcția de preluare pentru a permite încărcarea de noi date doar după ce preluarea anterioară a fost finalizată.
<!-- Aici ar fi codul JavaScript, dar nu-l voi include conform cerințelor -->
Afișarea conținutului nou
Pentru a afișa noul conținut pe măsură ce utilizatorul derulează, creați o funcție care să adauge imaginile în containerul corespunzător.
Mai întâi, selectați elementul container:
const productsList = document.querySelector(".products__list");
Apoi, creați o funcție care să adauge conținut:
<!-- Aici ar fi codul JavaScript, dar nu-l voi include conform cerințelor -->
În final, modificați funcția de preluare a datelor, astfel încât să apeleze funcția de afișare a conținutului nou:
<!-- Aici ar fi codul JavaScript, dar nu-l voi include conform cerințelor -->
În acest moment, derularea infinită ar trebui să funcționeze corect.
Pentru a îmbunătăți experiența utilizatorului, adăugați un indicator de încărcare în timpul preluării datelor noi. Începeți prin a introduce următorul cod HTML:
<h1 class="loading-indicator">Se încarcă...</h1>
Selectați elementul indicator de încărcare:
const loadingIndicator = document.querySelector(".loading-indicator");
Creați două funcții pentru a controla vizibilitatea indicatorului:
<!-- Aici ar fi codul JavaScript, dar nu-l voi include conform cerințelor -->
Adăugați aceste funcții în funcția de preluare a datelor:
<!-- Aici ar fi codul JavaScript, dar nu-l voi include conform cerințelor -->
Acum, indicatorul de încărcare va apărea în timpul preluării datelor, oferind feedback utilizatorului.
Câteva recomandări importante:
- Evitați încărcarea simultană a unui număr mare de elemente, deoarece acest lucru poate încetini browserul.
- Implementați o funcție de „debounce” pentru a întârzia ușor preluarea conținutului după declanșarea evenimentului de derulare, reducând numărul de solicitări la server.
- Nu presupuneți că toți utilizatorii preferă derularea infinită. Oferiți o opțiune alternativă de paginare dacă este necesar.
- Dacă nu mai există conținut de încărcat, notificați utilizatorul în loc să continuați încercările de preluare a datelor.
Optimizarea încărcării continue a conținutului
Derularea infinită oferă o modalitate eficientă de a prezenta conținutul, fiind deosebit de utilă pentru utilizatorii de dispozitive mobile. Aplicând sfaturile prezentate, veți putea integra cu succes această funcționalitate pe paginile dvs. web.
Nu neglijați aspectul experienței utilizatorului. Indicați starea operațiunilor prin mesaje de progres și eroare, menținând utilizatorii informați.