پیمایش بی‌نهایت: تسلط بر Intersection Observer API با ایجاد پیمایش بی‌نهایت بدون درز مانند یک حرفه‌ای

Summarize this content to 400 words in Persian Lang
این Intersection Observer API روشی را برای مشاهده ناهمزمان تغییرات در تقاطع (قابلیت مشاهده) یک عنصر هدف با یک عنصر اجداد یا نمای سند سطح بالا ارائه می دهد. معمولاً در پیاده‌سازی اسکرول بی‌نهایت، راه‌اندازی انیمیشن‌ها هنگام ورود یک عنصر به نمای، تصاویر با بارگذاری تنبل و غیره استفاده می‌شود.

این فرآیند شروع اقدامات را هنگامی که عناصر قابل مشاهده می شوند، ساده می کند و نیاز به مدیریت دستی رویداد و نظرسنجی مکرر را از بین می برد.

در این مقاله، ما یک پیمایش بینهایت با استفاده از Intersection Observer API در جاوا اسکریپت vanilla ( من قصد دارم نحوه استفاده از IntersectionObserver را برای پیاده سازی پیمایش بی نهایت با واکشی محتوای جدید هنگامی که یک عنصر هدف قابل مشاهده است (در پنجره مرورگر ما) نشان دهم.)

ما عنصر هدف لحظه ای را در مورد خود می خواهیم Loading More Items همانطور که در زیر نشان داده شده است 100٪ در پنجره مرورگر ما کاملاً قابل مشاهده است، سپس پست ها را واکشی می کنیم، فکر می کنیم که اساساً زمانی که کاربر به پایین محتوای فعلی رفته است “حسگر” است یا تشخیص می دهد. این تشخیص توسط IntersectionObserver API، که یک عنصر هدف را در پایین محتوا مشاهده می کند (در مورد ما). هنگامی که این عنصر هدف با درگاه نمایش تلاقی می کند (یعنی نمایان می شود، مانند تصویر زیر کاملاً قابل مشاهده می شود)، یک تابع پاسخ به تماس را برای بارگیری محتوای بیشتر فعال می کند (واکشی پست های بیشتر)

اجازه دهید ابتدا خودمان را با Intersection Observer API آشنا کنیم

1. یک IntersectionObserver ایجاد کنید – این observer عناصر را برای ما تماشا خواهد کردlet observer = new IntersectionObserver(callbackFunc, options)

callbackFunc – این تماس زمانی فراخوانی می شود که عنصر هدف با نمای دستگاه یا عنصر مشخص شده تقاطع پیدا کند.

به عبارت دیگر، هنگامی که عنصر هدف قابل مشاهده می شود یا زمانی که نمایان شدن آن تغییر می کند، این تابع فراخوانی می شود. وقتی از عنصر هدف “تقاطع با viewport” صحبت می کنیم، منظور زمانی است که بخشی یا تمام آن عنصر در پنجره مرورگر کاربر قابل مشاهده است.

options – اجازه دهید شرایطی را که تحت آن تماس ناظر پاسخ می دهد کنترل کنید callbackFunc با تعریف الف احضار می شود آستانه. این مانند تنظیم قوانین دستورالعمل برای خود است observer برای نظارت بر عنصر هدف خود تا زمانی که ممکن است عنصر هدف کاملاً قابل مشاهده، نیمه قابل مشاهده یا حتی یک اینچ شود، سپس ناظر با فراخوانی اساساً به شما گزارش می دهد. callbackFunc. پس از آن می توانید کاری را با آن عنصر هدف و غیره انجام دهید

const options = { root: null, threshold: 0.5 };

threshold: 0.5 می گوییم زمانی که 50 درصد عنصر هدف قابل مشاهده باشد، تماس برگشتی فعال می شود.بنابراین The observer’s callback function هنگامی که شرایط تقاطع (تعریف شده توسط threshold) برآورده شده اند.

به صورت پیش فرض root باطل است، در اینجا ما آن را به صراحت می گذرانیم، اما شامل نشدن ویژگی است root به طور ضمنی روی null تنظیم خواهد شد… NB می توانید ریشه را به هر عنصری تنظیم کنید

2. ناظر – ما استفاده می کنیم observe روشی برای شروع نظارت / مشاهده یک عنصر هدف. شما می توانید یک یا چند عنصر هدف داشته باشید

observer.observe(targetElement);

observer: نمونه ای از IntersectionObserver.targetElement: عنصر DOM که می خواهید برای مشاهده تغییرات مشاهده کنید.

این observe روش برای شروع مشاهده یک عنصر هدف خاص استفاده می شود. وقتی تماس می گیرد، به آن می گوید IntersectionObserver نمونه ای برای ردیابی عنصر مشخص شده و گزارش هر زمان که در viewport یا یک عنصر ریشه تعریف شده قابل مشاهده یا نامرئی شود.

اجازه می دهد تا همه چیز را با یک مثال واضح سیم کشی کنیم

ما یک برنامه وب ساده را پیاده سازی خواهیم کرد که پست ها را به صورت پویا و در حین پیمایش کاربر بارگیری می کند

یک ساختار Html ساده تعریف کنید

lang=”en”>

charset=”UTF-8″>
name=”viewport” content=”width=device-width, initial-scale=1.0″>
Infinite Scroll Example

#content {
max-width: 600px;
margin: 0 auto;
}
.item {
padding: 20px;
border: 1px solid #ccc;
margin: 10px 0;
}

id=”content”>

id=”loading” style=”text-align: center; margin: 20px; background-color: rgb(173, 160, 185);”>
Loading more items…

src=]]>”InfiniteScroll.js”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک فایل جاوااسکریت ایجاد کنید و آن را InfiniteScroll.js بنامید

بیایید برخی از متغیرهای مهم را در اینجا در بالا مقداردهی کنیم لطفاً برای توضیح به اسناد درون خطی توجه کنید

let currentPage = 1; // this will help us keep track of the current page of data
let loading = false; // this will prevent multiple fetches of data at the same time
const contentDiv = document.getElementById(‘content’); // our post will be dynamically loaded here
const loadingDiv = document.getElementById(‘loading’); // this will be our target element

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما می خواهیم عملکرد خود را که وظیفه واکشی پست را بر عهده دارد، تعریف کنیم

ما استفاده خواهیم کرد https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${page} نقطه پایانی API.

اجازه دهید آن را تجزیه کنیم، ما URL پایه را داریم https://jsonplaceholder.typicode.com/posts این به منبع “پست” در JSONPlaceholder API اشاره می کند و داده های مربوط به پست ها را ارائه می دهد.

ما نیز داشته ایم پارامترهای پرس و جو ?_limit=10&_page=${page} که درخواست را فیلتر می کند_limit=10 این به API می گوید که پاسخ را به 10 پست محدود کند_page=${page} این مشخص می کند که کدام صفحه از داده ها را می خواهید بازیابی کنید

مثلا، _page=1 اولین مجموعه 10 پستی را دریافت می کند، _page=2 10 پست بعدی را دریافت می کند و غیره. متغیر صفحه را به صورت پویا تغییر می دهیم

از این رو تابع ما به این صورت خواهد بود

const getPosts = async (page) => {
try {
let response = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${page}`);
if (!response.ok) {
throw new Error(“HTTP error! Status: ” + response.status);
}
return await response.json();
} catch (e) {
throw new Error(“Failed to fetch services: ” + e.message);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تابعی که قرار است داده ها را به صورت پویا در صفحه وب ما اضافه کند. ما می خواهیم آن را ساده نگه داریم

const appendData = (data) => {
data.forEach(item => {
const div = document.createElement(‘div’);
div.className = ‘item’;
div.innerHTML = `${item.title}${item.body}`;
contentDiv.appendChild(div);
});
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

لطفاً درام رول کنید… اکنون جادو از کجا شروع می شود

راه اندازی ناظر تقاطع

const observer = new IntersectionObserver(async (entries) => {
if (entries[0].isIntersecting && !loading) {

console.log(entries)

loading = true;
currentPage++;
try {
const data = await getPosts(currentPage);
appendData(data);
} catch (e) {
console.log(e.message);
}
loading = false;
}
}, { threshold: 1.0 });

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بیایید گام به گام کد بالا را مرور کنیم

ابتدا ما یک نمونه ایجاد هستیم که نام دارد observer

const observer = new IntersectionObserver(async (entries) => {}, { threshold: 1.0 });

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما در حال ارائه دو استدلال هستیم callbackFunc و options.

اگر فقط عبور کنید threshold option پسندیدن { threshold: 1.0 } هنگام ایجاد IntersectionObserver، به این معنی است که root به طور ضمنی روی مقدار پیش فرض آن تنظیم می شود که این است null. در این حالت، ناظر از نمای مرورگر به عنوان نمایشگر استفاده خواهد کرد root برای تشخیص دید 1.0 به این معنی که وقتی هدف 100٪ قابل مشاهده است، با شماره تماس بگیرید callbackFUnc بلافاصله

پاسخ به تماس 2 آرگومان می گیرد entries و observer که خود InstersectionObserver است. در مورد ما ما فقط از آن عبور می کنیم entries بحث و جدل.

این چیه entries??، این آرایه ای از IntersectionObserverEntry اشیاء. هر ورودی یک عنصر / عنصر هدف مشاهده شده را نشان می دهد و حاوی اطلاعاتی در مورد تقاطع آن با ریشه / یا هر عنصر مشخص شده است.

اجازه دهید ابتدا شروع به مشاهده عنصر هدف خود کنیم سپس به توضیح بالا برگردیم، منطقی خواهد بود

observer.observe(loadingDiv);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا ما استفاده می کنیم observe متدی که در صورت فراخوانی به آن می گوید IntersectionObserver نمونه ای برای ردیابی عنصر مشخص شده و هر زمان که قابل مشاهده شد گزارش دهید 100% یا 1.0 همانطور که ما تنظیم کردیم threshold به آن

هنگامی که دید عنصر هدف با توجه به آستانه مشخص شده تغییر می کند، callback function با آرایه ای از راه اندازی می شود IntersectionObserverEntry اشیاء و ما آنها را به عنوان ورودی دریافت می کنیم که جزئیات مربوط به تقاطع را ارائه می دهد.

بازگشت به تابع callback بالا، زمانی که ما console.log(entries) ما چیزی مانند زیر داریم. شما به وضوح می بینید که ورودی یک عنصر مشاهده شده (عنصر هدف) را نشان می دهد و حاوی اطلاعاتی در مورد تقاطع آن با ریشه است.از آنجایی که ما یک عنصر هدف را مشاهده می کنیم، آرایه ورودی های ما فقط شامل یک عنصر است IntersectionObserverEntry هدف – شی.

ما داریم time: این مهر زمانی است که نشان می دهد چه زمانی تقاطع رخ داده است / چه زمانی عنصر هدف به طور کامل در پنجره مرورگر قابل مشاهده است
ما داریم target: این خود عنصر مشاهده شده است. توجه داشته باشید که اکنون می توانید این عنصر را مانند تغییر رنگ و غیره دستکاری کنید.boundingClientRect: موقعیت و اندازه عنصر مشاهده شده

intersectionRect: سطح تقاطع نسبت به ریشه
rootBounds: اندازه ریشه (نمایشگاه) / در مورد ما پنجره مرورگر

isIntersecting: یک بولی که نشان می دهد آیا عنصر مشاهده شده در حال حاضر مطابق با آستانه مشخص شده با ریشه (یا درگاه دید) تلاقی می کند (خواه قابل مشاهده باشد).

سپس در داخل تابع callback، این کاری است که ما انجام می دهیم.

(entries[0].isIntersecting && !loading): بررسی اینکه آیا اولین ورودی است یا خیر (entries[0]) با درگاه دید تلاقی می کند (isIntersecting is true) و آن را تضمین می کند loading استfalse برای جلوگیری از واکشی چندین پست همزمان.

loading = true: ما در حال تنظیم هستیم loading پرچم به true برای نشان دادن اینکه واکشی داده در حال انجام است.

currentPage++: در حال افزایش است currentPage متغیر برای واکشی صفحه بعدی داده ها.

const data = await getServices(currentPage): ما تابع getPosts ناهمزمان را برای واکشی پست‌ها برای صفحه فعلی افزایش یافته فراخوانی می‌کنیم.

appendData(data): پست‌های واکشی شده (داده‌ها) را به DOM با استفاده از appendData تابع.

loading = false: در حال بازنشانی پرچم بارگیری به false پس از تکمیل واکشی و الحاق پست ها این اجازه می دهد تا زمانی که loadingDiv دوباره با viewport تلاقی می کند (کاملاً قابل مشاهده می شود) واکشی های بعدی رخ دهد.

اجازه می‌دهیم پیشرفت پیاده‌سازی اسکرول بی‌نهایت خود را نظارت کنیم و ببینیم چگونه درخواست‌ها با استفاده از ابزارهای توسعه‌دهنده در مرورگر ما انجام می‌شوند.

در نهایت ما Window Event Lister را داریم:

window.addEventListener(‘DOMContentLoaded’, async () => {
try {
const posts = await getPosts(currentPage);
if (posts) {
appendData(posts);
} else {
console.log(‘posts not found or undefined’);
}
} catch (e) {
console.log(e.message);
}
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زمانی اجرا می شود که محتوای DOM به طور کامل بارگیری شود. برای دریافت پست‌های اولیه، getPosts را فراخوانی می‌کند (currentPage = 1) و آن را با استفاده از appendData اضافه می کند

کد کامل

let currentPage = 1; // this will help us keep track of the current page of data
let loading = false; // this will prevent multiple fetches of data at the same time
const contentDiv = document.getElementById(‘content’); // our post will be dynamically loaded here
const loadingDiv = document.getElementById(‘loading’); // this will be our target element

const getPosts = async (page) => {
try {
let response = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${page}`);
if (!response.ok) {
throw new Error(“HTTP error! Status: ” + response.status);
}
return await response.json();
} catch (e) {
throw new Error(“Failed to fetch services: ” + e.message);
}
}

const appendData = (data) => {
data.forEach(item => {
const div = document.createElement(‘div’);
div.className = ‘item’;
div.innerHTML = `${item.title}${item.body}`;
contentDiv.appendChild(div);
});
}

const observer = new IntersectionObserver(async (entries) => {
if (entries[0].isIntersecting && !loading) {

console.log(entries)

loading = true;
currentPage++;
try {
const data = await getPosts(currentPage);
appendData(data);
} catch (e) {
console.log(e.message);
}
loading = false;
}
}, { threshold: 1.0 });

observer.observe(loadingDiv);

window.addEventListener(‘DOMContentLoaded’, async () => {
try {
const posts = await getPosts(currentPage);
if (posts) {
appendData(posts);
} else {
console.log(‘posts not found or undefined’);
}
} catch (e) {
console.log(e.message);
}
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

افکار نهایی

در این مقاله، API قدرتمند IntersectionObserver و نقش آن در ایجاد تجربه‌های اسکرول بی‌نهایت یکپارچه را بررسی کرده‌ایم. با استفاده از این API، می توانید قابلیت استفاده از برنامه های وب خود را افزایش دهید و آنها را برای کاربران پویاتر و جذاب تر کنید. در اینجا خلاصه ای از آنچه را پوشش دادیم آورده شده است

مفاهیم کلیدی:

IntersectionObserver API:

روشی کارآمد برای نظارت بر دید عناصر هدف در داخل نما ارائه می دهد.

فرآیند راه‌اندازی اقدامات را هنگامی که عناصر قابل مشاهده می‌شوند، ساده می‌کند و نیاز به مدیریت دستی رویداد و نظرسنجی مکرر را از بین می‌برد.

پیمایش بی نهایت:

امکان بارگیری مداوم محتوا در حین پیمایش کاربر را فراهم می کند و با ارائه جریانی ثابت از محتوای جدید بدون نیاز به بارگذاری مجدد صفحه یا صفحه بندی دستی، تجربه مرور را بهبود می بخشد.

توابع و گزینه های پاسخ به تماس:

این callbackFunc زمانی فراخوانی می شود که دید عنصر هدف بر اساس مقادیر آستانه مشخص شده تغییر کند.این options شی اجازه می دهد تا رفتار ناظر را تنظیم کنید، مانند تعیین ریشه و آستانه.

نتیجه

با تسلط بر IntersectionObserver API، می توانید برنامه های کاربردی وب پیچیده و کاربر پسند ایجاد کنید که تجربه ای یکپارچه و تعاملی را ارائه می دهند. چه در حال ساخت یک فید خبری، یک سایت تجارت الکترونیک، یا هر برنامه کاربردی دیگری باشید که محتوای سنگینی دارد، پیمایش بی‌نهایت که توسط IntersectionObserver ارائه می‌شود، تضمین می‌کند که کاربران درگیر می‌مانند و برنامه شما کارآمدی دارد.

پس ادامه دهید، وارد ویرایشگر کد خود شوید و از همین امروز شروع به پیاده سازی بی نهایت اسکرول در پروژه های خود کنید. کاربران شما از تجربه مرور روان و مداوم شما تشکر خواهند کرد!

 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">