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

למה להשתמש ב-Sroll האינסופי?

מגילת אינסופית מציעה מספר יתרונות המשפיעים ישירות על מעורבות המשתמשים וביצועי האתר:

  • (FLT:0) מלמד את הצורך בדמיון: ההרחבה: LeadFLT:1 על ידי ביטול עמוד reloads ולחיצה ידנית, גלישה הופכת חלקה יותר ואינטואיטיבית יותר משתמשים יכולים לחקור תוכן ללא הפרעות.
  • (FLT:0) גילוי תוכן של תחזיות: FLT1 כפריטים חדשים לטעון באופן אוטומטי, המבקרים נוטים יותר לראות מאמרים, מוצרים או פוסטים נוספים שאחרת עלולים להחמיץ.
  • (FLT:0) שיפור מדדי מעורבות המשתמשים:IRLT:1) זמן על דף, דפים לפגישה, וגביע הגלולות לעתים קרובות גדל כי זרימת הגלישה הטבעית נשמרת.
  • (FLT:0) מספק חוויית משתמש מודרנית ודינמית: ibph:1 , פלטפורמות פופולריות רבות כמו טוויטר, Pinterest ואינסטגרם להשתמש לגלול אינסופי כדי ליצור תחושה דמוית אפליקציה באינטרנט.

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

יישום בסיסי של Scroll האינסופי

יישום לגלול אינסופי בסיסי כרוך האזנה לאירוע: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

באמצעות אירוע הגלולות, אנו מזהים כאשר המשתמש מגולל ליד החלק התחתון של הדף.הסף (ראה LT: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';
 }
}

« עידוד המימוש

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

מחיקת אירוע Scroll

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

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

שימוש ב- Intersection Observer API

גישה יעילה יותר ומודרנית יותר היא ה-FLT:0 [הסעיף הבין-ממדי של ⁇ ] 1 [ה] היא מפקחת על אלמנט של שלחנל שהוצב בתחתית התוכן ומדליק ממבט כאשר הוא הופך גלוי.

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

זה מבטל את הצורך לצרף את המקשיב לגלול והוא קל יותר באופן משמעותי על החוט הראשי.

סוף סוף סוף-סוף-עין, גרייס

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

let hasMoreContent = true;

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

עקבו אחרי AJAX

כדי להפוך דינמי לגלול אינסופי, עליך להביא נתונים של שרת באמצעות AJAX. API Fetch הוא תקן מודרני.

דוגמה ל-API

דוגמה זו מניחה שהשרת שלך מספק נתונים של JSON עם כתובת 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';
 }
}

תגובות של Server וטעויות

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

תוצאות חוויית המשתמש

Smooth UX הוא קריטי לשמירה על משתמשים.כאן כמה שיפורים לשקול.

המונחים:

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

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

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

שיקולים

גליל אינסופי נגיש דורש:

  • (ב) [ה]התמ"ל]: "ה', כאשר יש צורך במסמכים חדשים, ה', ה', על מנת למסך קוראים באמצעות שימוש ב-FLT:11.
  • (FLT:0Keyboard ניווט:0Keyboard ניווט: 1.10LT) וודא שמשתמשים יכולים לחצות תוכן טעון חדש באמצעות מקלדת (Tab) להימנע ממלכודת מיקוד.
  • (ב) ,0) אלטרנטי לגלול אינסופי: FLT:1 לספק כפתור "Load More" כנפילה עבור משתמשים המעדיפים שליטה מפורשת.
<div id="content" aria-live="polite">...</div>

אופטימיזציה Mobile

במכשירים ניידים, אירוע הגלולות מתירה לעתים קרובות, אבל ה- Intersection Observer הוא אמין יותר.בנוסף, להתאים את הסף לחשבון עבור דיוקנאות קטנים יותר ו-Inertia מגע.

טכניקות מתקדמות

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

תמונות נזילות

תוכן חדש כולל תמונות.Lazy לטעון אלה באמצעות ה-FLT:13 תכונת על תגי ההרחבה (FLT:14) או FLT:0 Intersection ObservercioFLT:1 כדי להפחית רוחב פס ולשפר את זמן העומס הראשוני.

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

עריכת קוד מקור | Virtual Scrolling for Large lists

אם הגלול האינסופי שלך מצליח אלפי מזמורים, הביצועים יידרדרו.הגליל וירטואלי (או החלון) יהפוך רק את הפריטים הגלויים, באופן דרמטי להפחית את השימוש בזיכרון. Libraries כמו FLT:0Clusterize.jsFLT:1 או Reactized יכול לעזור, אבל יישום JavaScript טהור הם אפשריים למקרים פשוטים.

המונחים: content

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

מסקנה

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