למד על העקרונות והמעשיות של גלילה אינסופית.

גלילה אינסופית מאפשרת לתוכן לטעון ברציפות כשהמשתמשים עוברים למטה בעמוד, בניגוד לשיטת הלחיצה לטעינה של עימוד מסורתי. תכונה זו יכולה להציע חוויה חלקה יותר, במיוחד במכשירים ניידים.

גלה כיצד להגדיר גלילה אינסופית באמצעות HTML רגיל, CSS ו-JavaScript.

הגדרת החזית

התחל עם מבנה HTML בסיסי להצגת התוכן שלך. הנה דוגמה:

html>
<html>
<head>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<h1>Infinite Scroll Pageh1>
<divclass="products__list">
<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />
div>
<scriptsrc="script.js">script>
body>
html>
instagram viewer

דף זה מכיל סדרה של תמונות מצייני מיקום ומפנה לשני משאבים: קובץ CSS וקובץ JavaScript.

עיצוב CSS לתוכן שניתן לגלול

כדי להציג את תמונות מצייני המיקום ברשת, הוסף את ה-CSS הבא שלך style.css קוֹבֶץ:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }


body {
font-family: Cambria, Times, "TimesNewRoman", 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%);
}

כרגע, הדף שלך אמור להיראות כך:

יישום ליבה עם JS

לַעֲרוֹך script.js. כדי ליישם גלילה אינסופית, עליך לזהות מתי המשתמש גלל סמוך לתחתית מיכל התוכן או הדף.

"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
 ) {
// User is near the bottom, fetch more content
 fetchMoreContent();
 }
});

לאחר מכן, צור פונקציה כדי להביא נתונים נוספים של מציין מיקום.

asyncfunctionfetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");
if (!response.ok) {
thrownewError("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");
 }
}

עבור פרויקט זה, אתה יכול להשתמש ב-API מ fakestoreapi.

כדי לוודא שהנתונים שלך מאוחזרים בגלילה, עיין במסוף:

תבחין שהנתונים שלך נאספים מספר פעמים בגלילה, מה שיכול להיות גורם שפוגע בביצועי המכשיר. כדי למנוע זאת, צור מצב אחזור ראשוני של הנתונים:

let isFetching = false;

לאחר מכן, שנה את פונקציית האחזור שלך כדי להביא נתונים רק לאחר סיום האחזור הקודם.

asyncfunctionfetchMoreContent() {
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) {
thrownewError("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
 }
}

הצגת התוכן החדש

כדי להציג תוכן חדש כאשר המשתמש גולל מטה בעמוד, צור פונקציה שמצרפת את התמונות למיכל האב.

ראשית, בחר את רכיב האב:

const productsList = document.querySelector(".products__list");

לאחר מכן, צור פונקציה להוספת תוכן.

functiondisplayNewContent(data) {
 data.forEach((item) => {
const imgElement = document.createElement("img");
 imgElement.src = item.image;
 imgElement.alt = item.title;
 productsList.appendChild(imgElement); // Append to productsList container
 });
}

לבסוף, שנה את פונקציית האחזור שלך והעביר את הנתונים שהובאו לפונקציית התוספת.

asyncfunctionfetchMoreContent() {
if (isFetching) return;
 isFetching = true;


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("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;
 }
}

ועם זה, הגלילה האינסופית שלך עובדת כעת.

כדי לשפר את חווית המשתמש, תוכל להציג מחוון טעינה בעת שליפת תוכן חדש. התחל על ידי הוספת HTML זה.

<h1class="loading-indicator">Loading...h1>

לאחר מכן בחר את רכיב הטעינה.

const loadingIndicator = document.querySelector(".loading-indicator");

לבסוף, צור שתי פונקציות כדי לשנות את הנראות של מחוון הטעינה.

functionshowLoadingIndicator() {
 loadingIndicator.style.display = "block";
console.log("Loading...");
}
functionhideLoadingIndicator() {
 loadingIndicator.style.display = "none";
console.log("Finished loading.");
}

לאחר מכן, הוסף אותם לפונקציית האחזור.

asyncfunctionfetchMoreContent() {
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) {
thrownewError("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;
 }
}

שנותן:

כמה שיטות עבודה מומלצות לביצוע כוללות:

  • אל תביא יותר מדי פריטים בו זמנית. זה יכול להציף את הדפדפן ולפגוע בביצועים.
  • במקום להביא תוכן מיד לאחר זיהוי אירוע גלילה, השתמש בפונקציית ביטול יציאה כדי לעכב מעט את האחזור. זה יכול למנוע בקשות רשת מוגזמות.
  • לא כל המשתמשים מעדיפים גלילה אינסופית. להציע אפשרות ל השתמש ברכיב עימוד אם רוצים.
  • אם אין עוד תוכן לטעון, הודע למשתמש במקום לנסות ללא הרף להביא עוד תוכן.

שליטה בטעינת תוכן חלקה

גלילה אינסופית מאפשרת למשתמשים לגלוש בתוכן בצורה חלקה, וזה נהדר עבור אנשים המשתמשים במכשירים ניידים. אם אתה משתמש בטיפים ובעצות חשובות ממאמר זה, תוכל להוסיף תכונה זו לאתרי האינטרנט שלך.

זכור לחשוב על איך המשתמשים מרגישים כשהם משתמשים באתר שלך. הצג דברים כמו סימני התקדמות והערות שגיאה כדי לוודא שהמשתמש יודע מה קורה.