Gulungan Infinite adalah teknik populer yang digunakan di situs web untuk meningkatkan keterlibatan pengguna dengan terus menerus memuat konten baru saat pengguna menggulung ke bawah halaman. Pendekatan ini membuat pengunjung tetap terlibat lebih lama dan menyediakan pengalaman pelayaran tanpa kelam. Implementasi gulungan tak terbatas dengan JavaScript adalah terus terang dan dapat disesuaikan agar sesuai dengan berbagai kebutuhan situs web, dari feed media sosial ke daftar produk e-commerce.Dalam artikel ini, kita akan mengeksplorasi mengapa, bagaimana, dan praktik terbaik dari gulungan tak terbatas, lengkap dengan contoh kode dan pertimbangan kinerja yang diperluas.

Mengapa Tidak Ada yang Bisa Dipakai?

Unfinites scroll menawarkan beberapa manfaat yang berdampak langsung pada keterlibatan pengguna dan kinerja situs:

  • [[CharleFLT:0]]Mempertimbangkan kebutuhan pagination: Dengan menghilangkan halaman reload dan klik manual, browsing menjadi lebih halus dan lebih intuitif. Pengguna dapat mengeksplorasi konten tanpa interupsi.
  • [[Efleut:0]]Encourages penemuan konten: Sebagai item baru memuat secara otomatis, pengunjung lebih mungkin melihat artikel tambahan, produk, atau posting mereka mungkin sebaliknya meleset.
  • [[LALT:0]]Improves user routage metrics:] Waktu di halaman, halaman per sesi, dan kedalaman gulungan sering meningkat karena aliran alami dari browsing dipertahankan.
  • [[CharfLT:0]]Provides pengalaman pengguna modern yang dinamis: Banyak platform populer seperti Twitter, Pinterest, dan Instagram menggunakan gulungan tak terbatas untuk membuat sebuah aplikasi-seperti feel di web.

Namun, gulungan tak terbatas tidak sesuai untuk setiap konteks. Situs di mana pengguna perlu menemukan item tertentu dengan cepat (misalnya, daftar direktori atau hasil pencarian) mungkin mendapatkan manfaat dari paginasi klasik dengan tombol footer atau ⁇ Load More ⁇ . Keputusan harus didasarkan pada maksud pengguna dan struktur isi.

Implementasi Dasar dari Gulungan Tak Terhingga

Implementasi lingkupan dasar tak terbatas melibatkan mendengarkan acara dan menambahkan konten baru ketika pengguna mendekati bagian bawah halaman. Dibawah ini adalah panduan langkah- demi langkah untuk membangun versi sederhana.

Struktur HTML

Buat sebuah elemen wadah yang memegang konten awal. Semua item baru akan ditambahkan di sini.

<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>

Contoh JavaScript

Kami mendeteksi ketika pengguna telah menggulung dekat bawah halaman.

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';
 }
}

Memanenkan Implementasi

Untuk gulungan tak terbatas produksi, kinerja dan pengalaman pengguna harus disempurnakan.

Tidak Ada yang Mencampakan Peristiwa Gulungan

Acara gulungan mentah api dengan cepat, yang dapat menurunkan kinerja. Dengan menggunakan fungsi debounce memastikan pemeriksaan berjalan hanya setelah jeda singkat dalam penggulungan.

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));

Wonedon Menggunakan API Intersect Observer

Pendekatan yang lebih efisien dan modern adalah Intersection Observer. Ia memantau elemen sentinel yang ditempatkan di bagian bawah konten dan menembakkan callback ketika menjadi terlihat.

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);

Ini menghilangkan kebutuhan untuk melampirkan pendengar gulungan dan secara signifikan lebih ringan pada benang utama.

Tangan Tangan Tangani Akhir-dari-Konten Dengan Baik

Bila tidak ada lagi data yang ada, gulungan tak terbatas harus berhenti mencoba untuk memuat. Sebuah bendera sederhana atau tanggapan dari server dengan properti dapat mengontrol hal ini.

let hasMoreContent = true;

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

Memuat Data Nyata dengan AJAX

Untuk membuat gulir tak terhingga dinamis, Anda harus mengambil data dari server menggunakan AJAX. Fet API adalah standar modern.

Contoh API Kutipan Ifeks

Contoh ini menganggap server anda menyediakan data JSON bermarginasi dengan URL atau parameter nomor halaman.

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';
 }
}

Respon dan Kesalahan Pelayan Penanganan fregat

Selalu termasuk penanganan kesalahan yang kuat. Tampilkan opsi retry jika fetch gagal, dan menghindari loop pemuatan tak terbatas dengan membatasi retries. Untuk pengalaman pengguna yang lebih baik, tampilkan ⁇ Sesuatu yang salah ⁇ pesan dengan tombol ⁇ Coba lagi ⁇ .

Peningkatan Pengalaman Pengguna pada tahun 2013

UX lancar sangat penting untuk mempertahankan pengguna. Berikut beberapa perbaikan yang harus dipertimbangkan.

Penunjuk Memuat

Guna spinner, progres bar, atau layar rangka untuk menunjukkan bahwa lebih banyak konten sedang diambil. Ini meyakinkan pengguna bahwa situs tersebut bekerja.

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

Animasi CSS untuk pemintal ringan. untuk layar rangka, buat blok pemegang tempat yang meniru tata letak isi akhir.

Pertimbangan Kebolehcapaian Kebolehcapaian

Perlu gulungan tak terbatas aksesibilitas untuk tak terhingga:

  • PengurusanFocus: Ketika item baru memuat, umumkan mereka ke pembaca layar menggunakan regions.
  • [[EfleksifLT:0]] Keyboard navigation: Pengguna jaminan dapat melakukan traverse konten yang baru dimuat melalui keyboard (Tab). Hindari fokus trapping.
  • [[CALAT:0]]Alternatif terhadap gulungan tak terhingga: Menyediakan tombol ⁇ Load More ⁇ sebagai fallback bagi pengguna yang lebih memilih kontrol eksplisit.
<div id="content" aria-live="polite">...</div>

Pengoptimuman Mobile

Pada perangkat bergerak, peristiwa gulungan sering kali terjadi, tetapi Intersection Observer lebih dapat diandalkan.

Teknik Teknik Lanjutan Teknik

Untuk situasi performance tinggi seperti feed media sosial atau katalog besar, pertimbangkan optimisasi ini.

Image Pemuatan Lazy Kemilau Kemilau

Konten baru sering kali mencakup gambar. Lazy memuat ini menggunakan atribut pada tags atau Intersection Observer untuk mengurangi bandwidth dan meningkatkan waktu beban awal.

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

Tatal Virtual untuk Daftar Besar

Jika gulungan tak terbatas Anda mengelola ribuan node DOM, kinerja akan menurun. Penggulungan virtual (atau windowing) hanya memberikan item yang tampak, secara dramatis mengurangi penggunaan memori. Pustaka seperti Clusterize.js[ atau React Virtualized dapat membantu, tetapi implementasi JavaScript murni dimungkinkan untuk kasus sederhana.

Kandungan Pramuatnya yang Disukai

Untuk menghilangkan lag yang dipersepsikan, pramuat isi ke dalam wadah tersembunyi sebelum dibutuhkan. Ketika pengguna menggulung ke titik pemicu, cukup tukar elemen yang telah dimuat ke dalam DOM yang terlihat.

Kekecualian Kesimpulan

Mengimplementasi gulungan tak terbatas dengan JavaScript dapat meningkatkan keterlibatan pengguna secara signifikan dengan menyediakan pengalaman browsing yang halus dan berkesinambungan. Dari pendengar gulungan dasar ke Advances Intersection Observer dan pemuatan malas, teknik dapat disesuaikan dengan kebutuhan situs web mana pun. Ingatlah untuk menyeimbangkan kinerja dan aksesibilitas, dan selalu menyediakan mekanisme fallback bagi pengguna yang lebih memilih pagination diskret. Dengan kode dan strategi yang diuraikan di sini, Anda dapat membuat fitur gulungan tak terbatas yang membuat audien Anda terus menjelajah tanpa frustrasi.