Home-theater-designers
Pengguliran tak terbatas memungkinkan konten dimuat terus-menerus saat pengguna berpindah ke bawah halaman, tidak seperti metode klik untuk memuat pagination tradisional. Fitur ini dapat menawarkan pengalaman yang lebih lancar, terutama pada perangkat seluler.
Video MUO hari ini GULIR UNTUK MELANJUTKAN ISI
Temukan cara menyiapkan gulir tak terbatas menggunakan HTML biasa, CSS, dan JavaScript.
Menyiapkan Bagian Depan
Mulailah dengan struktur HTML dasar untuk menampilkan konten Anda. Berikut ini contohnya:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Infinite Scroll Page</h1>
<div class="products__list">
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
</div>
<script src="script.js"></script>
</body>
</html>
Halaman ini berisi serangkaian gambar placeholder dan referensi dua sumber: file CSS dan file JavaScript.
Gaya CSS untuk Konten yang Dapat Digulir
Untuk menampilkan gambar placeholder dalam kotak, tambahkan CSS berikut ke file gaya.css mengajukan:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body {
font-family: Cambria, Times, "Times New Roman", serif;
}
h1 {
text-align: center;
font-size: 5rem;
padding: 2rem;
}
img {
width: 100%;
display: block;
}
.products__list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.products__list > * {
width: calc(33% - 2rem);
}
.loading-indicator {
display: none;
position: absolute;
bottom: 30px;
left: 50%;
background: #333;
padding: 1rem 2rem;
color: #fff;
border-radius: 10px;
transform: translateX(-50%);
}
Saat ini, halaman Anda akan terlihat seperti ini:
berapa harga youtube premium family
Implementasi Inti Dengan JS
Sunting skrip.js . Untuk menerapkan pengguliran tak terbatas, Anda perlu mendeteksi kapan pengguna telah menggulir di dekat bagian bawah penampung konten atau halaman.
"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
Lalu, buat fungsi untuk mengambil lebih banyak data placeholder.
async function fetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
console.log(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
}
}
Untuk proyek ini, Anda dapat menggunakan API dari toko palsu .
Untuk mengonfirmasi bahwa data Anda diambil saat digulir, lihat konsol:
Anda akan melihat data Anda diambil beberapa kali saat di-scroll yang dapat menjadi faktor yang mengganggu kinerja perangkat. Untuk mencegah hal ini, buat status pengambilan data awal:
let isFetching = false;
Kemudian, ubah fungsi pengambilan Anda agar hanya mengambil data setelah pengambilan sebelumnya selesai.
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true; // Set the flag to true
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false; // Reset the flag to false
}
}
Menampilkan Konten Baru
Untuk menampilkan konten baru saat pengguna menggulir halaman ke bawah, buat fungsi yang menambahkan gambar ke penampung induk.
Pertama, pilih elemen induk:
const productsList = document.querySelector(".products__list");
Kemudian, buat fungsi untuk menambahkan konten.
function displayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement); // Append to productsList container
});
}
Terakhir, ubah fungsi pengambilan Anda dan teruskan data yang diambil ke fungsi append.
cara memindai mac untuk virus
async function fetchMoreContent() {
if (isFetching) return;
isFetching = true;
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false;
}
}
Dan dengan itu, gulungan tak terbatas Anda sekarang berfungsi.
Peningkatan Gulir Tak Terbatas
Untuk meningkatkan pengalaman pengguna, Anda dapat menampilkan indikator pemuatan saat mengambil konten baru. Mulailah dengan menambahkan HTML ini.
cara menggunakan catatan tempel di windows 10
<h1 class="loading-indicator">Loading...</h1>
Kemudian pilih elemen pemuatan.
const loadingIndicator = document.querySelector(".loading-indicator");
Terakhir, buat dua fungsi untuk mengubah visibilitas indikator pemuatan.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Kemudian, tambahkan mereka ke fungsi pengambilan.
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true;
showLoadingIndicator(); // Show loader
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
hideLoadingIndicator(); // Hide loader
isFetching = false;
}
}
Yang memberikan:
Praktik yang Baik untuk Gulir Tak Terbatas
Beberapa praktik terbaik yang harus diikuti meliputi:
- Jangan mengambil terlalu banyak item secara bersamaan. Hal ini dapat membebani browser dan menurunkan kinerja.
- Daripada mengambil konten segera setelah mendeteksi peristiwa gulir, gunakan fungsi debounce untuk menunda pengambilan sedikit. Ini bisa mencegah permintaan jaringan yang berlebihan .
- Tidak semua pengguna menyukai pengguliran tanpa batas. Tawarkan opsi untuk menggunakan komponen pagination Jika diinginkan.
- Jika tidak ada lagi konten yang perlu dimuat, beri tahu pengguna daripada terus mencoba mengambil lebih banyak konten.
Menguasai Pemuatan Konten yang Mulus
Pengguliran tanpa batas memungkinkan pengguna menelusuri konten dengan lancar, dan ini bagus untuk orang yang menggunakan perangkat seluler. Jika Anda menggunakan tips dan saran penting dari artikel ini, Anda dapat menambahkan fitur ini ke situs web Anda.
Ingatlah untuk memikirkan bagaimana perasaan pengguna saat mereka menggunakan situs Anda. Tampilkan hal-hal seperti tanda kemajuan dan catatan kesalahan untuk memastikan pengguna mengetahui apa yang terjadi.