Home-theater-designers
Tatal tak terhingga membolehkan kandungan dimuatkan secara berterusan apabila pengguna bergerak ke bawah halaman, tidak seperti kaedah klik untuk memuatkan penomboran tradisional. Ciri ini boleh menawarkan pengalaman yang lebih lancar, terutamanya pada peranti mudah alih.
Video MUO pada hari itu SCROLL UNTUK MENERUSKAN KANDUNGAN
Temui cara untuk menyediakan tatal tak terhingga menggunakan HTML biasa, CSS dan JavaScript.
Menyediakan Bahagian Depan
Mulakan dengan struktur HTML asas untuk memaparkan kandungan anda. Berikut ialah contoh:
<!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 mengandungi satu siri imej pemegang tempat dan merujuk dua sumber: fail CSS dan fail JavaScript.
Penggayaan CSS untuk Kandungan Boleh Tatal
Untuk memaparkan imej pemegang tempat dalam grid, tambahkan CSS berikut pada anda style.css fail:
* {
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%);
}
Pada masa ini, halaman anda sepatutnya kelihatan seperti ini:
Pelaksanaan Teras Dengan JS
Sunting script.js . Untuk melaksanakan tatal tak terhingga, anda perlu mengesan apabila pengguna telah menatal berhampiran bahagian bawah bekas kandungan 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();
}
});
Kemudian, buat fungsi untuk mengambil lebih banyak data pemegang tempat.
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 projek ini, anda boleh menggunakan API dari fakestoreapi .
Untuk mengesahkan data anda sedang diambil pada tatal, lihat konsol:
Anda akan dapati data anda diambil beberapa kali pada tatal yang boleh menjadi faktor yang menjejaskan prestasi peranti. Untuk mengelakkan ini, buat keadaan pengambilan awal data:
let isFetching = false;
Kemudian, ubah suai fungsi pengambilan anda untuk hanya mengambil data selepas pengambilan sebelumnya telah selesai.
cara memadam windows hiberfil.sys 10
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
}
}
Memaparkan Kandungan Baru
Untuk memaparkan kandungan baharu apabila pengguna menatal ke bawah halaman, buat fungsi yang menambahkan imej pada bekas induk.
Mula-mula, pilih elemen induk:
const productsList = document.querySelector(".products__list");
Kemudian, buat fungsi untuk menambah kandungan.
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
});
}
Akhir sekali, ubah suai fungsi ambil anda dan hantar data yang diambil ke fungsi tambah.
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, skrol tak terhingga anda kini berfungsi.
Penambahbaikan Tatal Tak Terhingga
Untuk meningkatkan pengalaman pengguna, anda boleh memaparkan penunjuk pemuatan apabila mengambil kandungan baharu. Mulakan dengan menambah HTML ini.
<h1 class="loading-indicator">Loading...</h1>
Kemudian pilih elemen pemuatan.
const loadingIndicator = document.querySelector(".loading-indicator");
Akhir sekali, cipta dua fungsi untuk menogol keterlihatan penunjuk pemuatan.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Kemudian, tambahkannya pada fungsi ambil.
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:
Amalan Baik untuk Tatal Tak Terhingga
Beberapa amalan terbaik untuk diikuti termasuk:
- Jangan ambil terlalu banyak item serentak. Ini boleh mengatasi penyemak imbas dan merendahkan prestasi.
- Daripada mengambil kandungan serta-merta selepas mengesan acara tatal, gunakan fungsi nyahlantun untuk menangguhkan sedikit pengambilan. Ini boleh mengelakkan permintaan rangkaian yang berlebihan .
- Tidak semua pengguna lebih suka menatal tanpa had. Menawarkan pilihan untuk gunakan komponen penomboran jika dikehendaki.
- Jika tiada lagi kandungan untuk dimuatkan, maklumkan kepada pengguna dan bukannya terus mencuba untuk mendapatkan lebih banyak kandungan.
Menguasai Pemuatan Kandungan Yang Lancar
Penatalan tanpa had membolehkan pengguna menyemak imbas kandungan dengan lancar dan ia bagus untuk orang yang menggunakan peranti mudah alih. Jika anda menggunakan petua dan nasihat penting daripada artikel ini, anda boleh menambahkan ciri ini pada tapak web anda.
Ingat untuk berfikir tentang perasaan pengguna apabila mereka menggunakan tapak anda. Tunjukkan perkara seperti tanda kemajuan dan nota ralat untuk memastikan pengguna mengetahui perkara yang berlaku.