Εφαρμογή Άπειρης Κύλισης με Javascript για Καλύτερη εμπλοκή χρήστη

Ωστόσο, η άπειρη κύλιση δεν είναι κατάλληλη για κάθε πλαίσιο. Οι ιστοσελίδες όπου οι χρήστες πρέπει να βρουν συγκεκριμένα αντικείμενα γρήγορα (π.χ., λίστες καταλόγου ή αποτελέσματα αναζήτησης) μπορεί να επωφεληθούν από την κλασική σελιδοποίηση με ένα υποσέλιδο ή ⁇ Load More ⁇ κουμπί. Η απόφαση θα πρέπει να βασίζεται στην πρόθεση του χρήστη και τη δομή περιεχομένου.

Βασική εφαρμογή του Άπειρου Ρόλου

Η εφαρμογή ενός βασικού άπειρου πάπυρου περιλαμβάνει ακρόαση για το γεγονός [[LFT:0]]] και προσθήκη νέου περιεχομένου όταν ο χρήστης προσεγγίζει το κάτω μέρος της σελίδας. Παρακάτω είναι ένας βήμα προς βήμα οδηγός για την κατασκευή μιας απλής έκδοσης.

Δομή HTML

⁇ ενός στοιχείου δοχείου που να περιέχει το αρχικό περιεχόμενο. Όλα τα νέα αντικείμενα θα προσαρτηθούν εδώ.

<div id="content">
 <!-- Existing items loaded on page load -->
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
</div>
<div id="loading-indicator" style="display:none;">Loading more content...</div>

Παράδειγμα JavaScript

Χρησιμοποιώντας το συμβάν κύλισης, ανιχνεύουμε όταν ο χρήστης έχει κύλιση κοντά στο κάτω μέρος της σελίδας. Το κατώφλι ([[LFT:2]]]) εμποδίζει τη σκανδάλη να πυροβολήσει πολύ αργά.

const contentDiv = document.getElementById('content');
const loadingIndicator = document.getElementById('loading-indicator');
let isLoading = false; // Prevent duplicate requests

window.addEventListener('scroll', () => {
 const scrollPosition = window.innerHeight + window.scrollY;
 const documentHeight = document.body.offsetHeight;

 if (scrollPosition >= documentHeight - 200 && !isLoading) {
 loadMoreContent();
 }
});

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 // Simulate fetching new content from server
 const newItem = document.createElement('div');
 newItem.className = 'item';
 newItem.textContent = `New item loaded at ${new Date().toLocaleTimeString()}`;
 contentDiv.appendChild(newItem);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

Ενίσχυση της εφαρμογής

Για μια παραγωγή-έτοιμη άπειρη κύλιση, η απόδοση και η εμπειρία του χρήστη πρέπει να εκλεπτυσμένη.

Αποκηρύσσοντας το γεγονός του κύλισης

Η λειτουργία αποσφαλμάτωσης εξασφαλίζει ότι ο έλεγχος εκτελείται μόνο μετά από μια σύντομη παύση στην κύλιση.

function debounce(func, wait) {
 let timeout;
 return function executedFunction(...args) {
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(this, args), wait);
 };
}

window.addEventListener('scroll', debounce(checkScrollPosition, 100));

Χρήση του API Παρατηρητών Intersection

Μια πιο αποτελεσματική και σύγχρονη προσέγγιση είναι η Intersection Observer. Παρακολουθεί ένα στοιχείο-δείκτη τοποθετημένο στο κάτω μέρος του περιεχομένου και ρίχνει μια επανάκληση όταν γίνεται ορατό.

const sentinel = document.createElement('div');
sentinel.id = 'scroll-sentinel';
contentDiv.after(sentinel);

const observer = new IntersectionObserver((entries) => {
 if (entries[0].isIntersecting && !isLoading) {
 loadMoreContent();
 }
});
observer.observe(sentinel);

Αυτό εξαλείφει την ανάγκη να προσαρτήσετε έναν ακροατή κύλισης και είναι σημαντικά ελαφρύτερο στο κύριο νήμα.

Χειρισμός του τέλους της-περιεχόμενης με χάρη

Όταν δεν υπάρχουν άλλα δεδομένα, ο άπειρος πάπυρος πρέπει να σταματήσει την προσπάθεια φόρτωσης. Μια απλή σημαία ή μια απάντηση από τον εξυπηρετητή με μια ιδιότητα μπορεί να το ελέγξει αυτό.

let hasMoreContent = true;

async function loadMoreContent() {
 if (!hasMoreContent) return;
 // ... fetch data
 if (response.data.length === 0) hasMoreContent = false;
}

Φόρτωση πραγματικών δεδομένων με AJAX

Για να κάνετε την άπειρη κύλιση δυναμική, πρέπει να φέρετε δεδομένα από έναν εξυπηρετητή χρησιμοποιώντας το AJAX. Το Fett API είναι το σύγχρονο πρότυπο.

Ανάκτηση παραδείγματος API

Αυτό το παράδειγμα υποθέτει ότι ο διακομιστής σας παρέχει διαχωρισμένα δεδομένα JSON με ένα [[LFT:8]] URL ή μια παράμετρο αριθμού σελίδας.

const contentUrl = '/api/items?page=1';
let currentPage = 1;

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 const response = await fetch(`/api/items?page=${++currentPage}`);
 if (!response.ok) throw new Error('Network error');
 const data = await response.json();

 data.items.forEach(item => {
 const el = document.createElement('div');
 el.className = 'item';
 el.textContent = item.title;
 contentDiv.appendChild(el);
 });

 // If the server indicates no more data, disable loading
 if (data.is_last_page) hasMoreContent = false;
 } catch (error) {
 console.error('Failed to load content:', error);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

Χειρισμός απαντήσεων εξυπηρετητή και σφαλμάτων

Πάντα περιλαμβάνει τον ισχυρό χειρισμό σφαλμάτων. Εμφάνιση μιας επιλογής επανάληψης αν η ανάκτηση αποτύχει και αποφύγετε άπειρους βρόχους φόρτωσης περιορίζοντας τις επαναλήψεις. Για μια καλύτερη εμπειρία χρήστη, εμφανίστε ένα ⁇ Κάτι πήγε στραβά ⁇ μήνυμα με ένα ⁇ Προσπάθησε ξανά ⁇ κουμπί.

Βελτιώσεις Εμπειρία χρήστη

Το Smooth UX είναι κρίσιμο για τους χρήστες που διατηρούν.

Δείκτες φόρτωσης

Χρησιμοποιήστε ένα spinner, γραμμή προόδου, ή οθόνες σκελετό για να υποδείξετε ότι περισσότερο περιεχόμενο είναι να ληφθεί.

<div id="loading" class="loading-spinner"></div>

Για τις οθόνες σκελετού, δημιουργήστε μπλοκ τοποθέτων που μιμούνται την τελική διάταξη περιεχομένου.

Εξετάσεις Προσβασιμότητας

Η πρόσβαση σε άπειρη κύλιση απαιτεί:

• Διαχείριση Focus: Όταν φορτώνουν νέα αντικείμενα, τους ανακοινώνουν να βάλουν σε οθόνη αναγνώστες χρησιμοποιώντας περιοχές.
• Πλοήγηση πληκτρολογίου: Εξασφαλίστε ότι οι χρήστες μπορούν να διασχίσουν το πρόσφατα φορτωμένο περιεχόμενο μέσω πληκτρολογίου (Tab). Αποφύγετε την παγίδευση εστίασης.
• Εναλλακτικά προς άπειρη κύλιση: Παρέχετε ένα κουμπί ⁇ Load More ⁇ ως εφεδρικό για τους χρήστες που προτιμούν τον ⁇ ητό έλεγχο.

<div id="content" aria-live="polite">...</div>

Κινητή βελτιστοποίηση

Στις κινητές συσκευές, το συμβάν κύλισης πυροβολεί συχνά, αλλά ο παρατηρητής Intersection είναι πιο αξιόπιστος. Επίσης, ρυθμίστε το κατώφλι για να λογοδοτήσουν για μικρότερες θεάσεις και να αγγίξουν την αδράνεια.

Προχωρημένες Τεχνικές

Για καταστάσεις υψηλής απόδοσης όπως social media feeds ή μεγάλους καταλόγους, εξετάστε αυτές τις βελτιστοποιήσεις.

Τεμπέλη φόρτωση εικόνων

Το νέο περιεχόμενο συχνά περιλαμβάνει εικόνες. Τεμπέλης φόρτωσης αυτών χρησιμοποιώντας το χαρακτηριστικό στις ετικέτες ή το Intersection Observer[[LFT:1]] για να μειωθεί το εύρος ζώνης και να βελτιωθεί ο αρχικός χρόνος φόρτωσης.

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="..." />

Αν η άπειρη κύλιση σας διαχειρίζεται χιλιάδες κόμβους DOM, η απόδοση θα υποβαθμίσει. Η εικονική κύλιση (ή windowing) αποδίδει μόνο τα ορατά αντικείμενα, μειώνοντας δραματικά τη χρήση μνήμης. Βιβλιοθήκες όπως Clusterize.js[[LFT:1]] ή React Virtualized μπορεί να βοηθήσει, αλλά οι καθαρές υλοποιήσεις JavaScript είναι δυνατές για απλές περιπτώσεις.