تعرف على المبادئ والتطبيق العملي للتمرير اللانهائي.

يتيح التمرير اللانهائي تحميل المحتوى بشكل مستمر أثناء انتقال المستخدمين إلى أسفل الصفحة، على عكس طريقة النقر للتحميل الخاصة بترقيم الصفحات التقليدية. يمكن أن توفر هذه الميزة تجربة أكثر سلاسة، خاصة على الأجهزة المحمولة.

اكتشف كيفية إعداد التمرير اللانهائي باستخدام 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) من com.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;
 }
}

الذي يعطي:

تتضمن بعض أفضل الممارسات التي يجب اتباعها ما يلي:

  • لا تجلب الكثير من العناصر في وقت واحد. قد يؤدي ذلك إلى إرباك المتصفح وتقليل الأداء.
  • بدلاً من جلب المحتوى فور اكتشاف حدث التمرير، استخدام وظيفة الارتداد لتأخير الجلب قليلاً. هذا يمكن منع طلبات الشبكة المفرطة.
  • لا يفضل جميع المستخدمين التمرير اللانهائي. تقديم خيار ل استخدم مكون ترقيم الصفحات اذا رغب.
  • إذا لم يكن هناك المزيد من المحتوى للتحميل، فأخبر المستخدم بدلاً من المحاولة المستمرة لجلب المزيد من المحتوى.

إتقان تحميل المحتوى بسلاسة

يتيح التمرير اللانهائي للمستخدمين تصفح المحتوى بسلاسة، وهو أمر رائع للأشخاص الذين يستخدمون الأجهزة المحمولة. إذا استخدمت النصائح والإرشادات المهمة الواردة في هذه المقالة، فيمكنك إضافة هذه الميزة إلى مواقع الويب الخاصة بك.

تذكر أن تفكر في ما يشعر به المستخدمون عند استخدامهم لموقعك. اعرض أشياء مثل علامات التقدم وملاحظات الأخطاء للتأكد من أن المستخدم يعرف ما يحدث.