پیاده‌سازی Lazy Loading در جاوا اسکریپت

یکی از آرزوهای کاربران در مواجه با یک وبسایت یا اپلیکیشن این است که محتوای آن را هر چه سریع‌تر مشاهده بکنند و منتظر باز شدن آن نمانند. بدبختانه با وضعیت اینترنت و کُند بودن آن، ما برای بیشتر اپلیکیشن‌ها و وبسایت‌ها باید منتظر بارگذاری محتوا باشیم و در نتیجه همیشه کمی معطل می‌مانیم. در این حالت صاحبان وبسایت باید یک راهکار ارائه بدهند تا کاربران بتوانند با سرعت بیشتری به محتوای مورد نظرشان دست پیدا کنند. یک روش اساسی و بسیار مفید برای این حالت استفاده از Lazy Loading یا بارگذاری آهسته است.

Lazy Loading یک متد برای بارگذاری محتوا برای کاربران است. در این حالت، ابتدا محتوای کلی وبسایت بارگذاری می‌شوند و سپس محتوای ضروری براساس اسکرول یا تعامل کاربران با وبسایت بارگذاری خواهد شد. از این جهت می‌توان نتیجه گرفت که در این روش همه محتوا وبسایت به صورت یک جا بارگذاری نخواهند شد و همه چیز قدم به قدم پیش خواهد رفت. وبسایت‌ها و اپلیکیشن‌ها این کار را به این جهت انجام می‌دهند تا کاربران بتوانند سریع‌تر وبسایت را مشاهده بکنند و منتظر بارگذاری تمام محتوا (که البته در بیشتر حالت‌ها همه محتوا نیز مطمئنا کاربردی نخواهد بود) نخواهند بود.

بارگذاری آهسته یا Lazy Loading چه فوایدی دارد؟

Lazy Loading می‌تواند فواید مختلفی در حالات متفاوتی داشته باشد که ما در زیر به چند مورد کلی از آن اشاره خواهیم کرد:

کاهش حجم مصرفی پهنای باند: بارگذاری محتوای اضافی و غیر کاربردی برای کاربران باعث می‌شود تا حجم مصرفی اینترنت آن‌ها افزایش پیدا کند. از این طریق می‌توانید لطف بزرگی به کاربران بکنید تا حجم مصرفی اینترنت ماهیانه خود را کاهش دهند.
افزایش سرعت بارگذاری وبسایت و بهبود سئو: از آنجایی که در این روش همه چیز به صورت یکجا بارگذاری نمی‌شود، سرعت بارگذاری وبسایت شما بالا خواهد رفت. مطمئنا زمانی که وبسایت شما سریع‌تر برای کاربران بارگذاری شود، موتورهای جستجوگر این مورد را به صورت یک پوینت مثبت در نظر می‌گیرند. در نتیجه وضعیت سئو وبسایت شما نیز بهبود پیدا می‌کند.
کاهش نرخ بارگذاری سرور: زمانی که کاربر درخواست بارگذاری یک محتوا را دارد مطمئنا سرور شما بخشی از پردازش خود را به آن نسبت می‌دهد و در نتیجه کمی اشغال می‌شود. حال فکر کنید که به جای اینکه به صورت پیشفرض این محتوا بارگذاری شوند اجازه بدهید تا کاربران ابتدا آن را درخواست کنند و سپس محتوا بارگذاری شود، مطمئنا حجم درخواست‌ها از سرور کاهش پیدا می‌کند.
بهبود TTI یا میزان زمان لازم برای انجام تعامل: TTI یا Time to Interactivity به مدت زمانی گفته می‌شود که در نهایت وبسایت شما می‌تواند به صورت تمام و کمال کار بکند و کاربر با آن تعامل برقرار نماید. با اولویت بندی محتوا در جهت بارگذاری، شما می‌توانید میزان زمان مربوط به TTI را کاهش دهید.
بهبود وضعیت مرور وبسایت با موبایل: کاربران دسکتاپ عجله‌ی زیادی برای باز شدن وبسایت ندارند اما کاربران موبایل اینگونه نیستند، بلکه می‌خواهند همه چیز در سریع‌ترین حالت ممکن در اختیارشان قرار بگیرد. با پیاده سازی Lazy Loading شما می‌توانید این آرزوی آن‌ها را برآورد کنید و از طرفی دیگر در تجربه استفاده از وبسایت به آن‌ها حداکثر بهینه بودن را ارائه دهید.

تکنیک‌های مختلف برای پیاده‌سازی بارگذاری آهسته یا Lazy Loading در جاوا اسکریپت

برای پیاده سازی بارگذاری آهسته در جاوا اسکریپت شما روش‌های مختلفی را می‌توانید پیش بگیرید. اما در این مقاله قصد داریم شما را با دو مورد از اصلی‌ترین و مرسوم‌ترین روش‌ها آشنا کنیم. یکی از آن‌ها IOA یا Intersection Observer API است و دیگری از طریق رویداد Scroll انجام می‌گیرد. بیایید با هر دو این موارد آشنا شده و شیوه پیاده سازی آن‌ها را یاد بگیریم.

بارگذاری آهسته با استفاده از IOA یا Intersection Observer

Intersection Observer یک API جاوا اسکریپت است که به توسعه دهندگان اجازه می‌دهد تا بتوانند تغییرات یک المان در یک ویوپورت خاص مشاهده و دستکاری کند. در واقع با استفاده از این API می‌توانید بفهمید که کاربران در کدام قسمت از وبسایت شما هستند و براساس آن محتوا را برای آن‌ها بارگذاری کنید. در اینجا قصد داریم به صورت ساده این موضوع را بررسی کنیم و یک پیاده سازی ساده از آن را به شما نشان دهیم.

برای شروع مطمئن شوید که یک فایل با ساختار استاندارد HTML در اختیار دارید، همچنین ما به یک تگ img داریم اما به جای استفاده از src که منبع اصلی تصویر را به صورت URL در خود می‌کند از data-src استفاده خواهیم کرد تا lazy loading فراخوانی شود.

<!DOCTYPE html>
<html>
<head>
 <title>Lazy Loading Images</title>
</head>
<body>
 <h1>Lazy Loading Images Example</h1>
 <img class="lazy" data-src="image1.jpg" alt="Image 1">
 <img class="lazy" data-src="image2.jpg" alt="Image 2">
 <!-- Add more images with the "lazy" class and "data-src" attribute -->
</body>
</html>

در قدم بعدی یک فایل جاوا اسکریپتی را ایجاد خواهیم کرد و یک نمونه از کلاس IntersectionObserver را می‌سازیم. در این نمونه یک Callback برای تعیین ورود یا خروج یک المان از ویوپورت را نیز ایجاد می‌کنیم. به کد زیر دقت کنید:

// Get all elements with the "lazy" class
const lazyImages = document.querySelectorAll(".lazy");
// Create a new Intersection Observer
const observer = new IntersectionObserver((entries, observer) => {
 entries.forEach((entry) => {
  if (entry.isIntersecting) {
   // Load the image when it comes into the viewport
   entry.target.src = entry.target.dataset.src;
   observer.unobserve(entry.target); // Unobserve the image after it's loaded
  }
 });
});
// Observe each lazy image
lazyImages.forEach((image) => {
 observer.observe(image);
});

در کد بالا ابتدا تمام المان‌هایی که کلاس lazy دارند را انتخاب می‌کنیم. بعد از آن یک نمونه جدید از IntersectionObserver را ایجاد خواهیم کرد و تابعی که قرار است المان داخل ویوپورت را هدف قرار دهد را پیاده سازی خواهیم کرد. در این حالت زمانی که یک تصویر یا یک المان وارد ویوپورت شود مقدار entry.isIntersecting برابر true قرار گرفته src در نهایت مقداردهی می‌شود. همچنین بعد از آنکه المان بارگذاری شد برای اینکه کاربری اپلیکیشن را بهینه کنیم دست از عملیات Observing برخواهیم داشت. برای اینکار ما observer.unobserve(entry.target) را فراخوانی خواهیم کرد.

بارگذاری آهسته یا Lazy Loading با استفاده از رویداد Scroll

یکی دیگر از روش‌های پیاده سازی Lazy Loading در جاوا اسکریپت استفاده از رویداد Scroll است. از آنجایی که شما براساس یک رویداد می‌توانید یکسری ویژگی‌ها را فعال کنید، قابلیت آن را خواهید داشت تا کنترل کاملی روی محتوا مورد نظرتان داشته باشید. از طرفی دیگر از آنجایی که این ویژگی یکی از اصلی‌ترین و استانداردترین ویژگی‌های درونی جاوا اسکریپت است هیچگونه نیازی به نگرانی در ارتباط با پشتیبانی شدن ندارد. برعکس حالت پیش که تنها برای تصاویر و برخی المان‌های دیگر طراحی شده و براساس آن دسته از نیازها تعریف شده است، رویداد اسکرول بسیار منعطف‌تر بوده و می‌توان به خوبی نیازمندی‌های مختلف را با آن تعریف کرد.

بیایید با یک مثال شروع کنیم. ابتدای کار شما نیاز به یک فایل HTML با ساختار زیر دارید.

<!DOCTYPE html>
<html>
<head>
 <title>Lazy Loading Content on Scroll</title>
</head>
<body>
 <h1>Lazy Loading Content Example</h1>
 <div class="lazy-content">
  <p>Some content to be lazily loaded...</p>
 </div>
 <div class="lazy-content">
  <p>More content to be lazily loaded...</p>
 </div>
 <!-- Add more elements with the "lazy-content" class -->
</body>
</html>

در کدهای جاوا اسکریپتی ما یک تابع با نام isElementInViewport تعریف خواهیم کرد که وجود یا عدم وجود یک المان خاص در ویوپورت را بررسی می‌کند. بعد از آن تابع lazyLoadContent() را نیز فراخوانی خواهیم کرد که تمام المان‌هایی که کلاس lazy-content را دارند پیمایش می‌کند. به کدهای زیر دقت کنید:

// Function to check if an element is in the viewport
function isElementInViewport(element) {
 const rect = element.getBoundingClientRect();
 return (
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  rect.right <= (window.innerWidth || document.documentElement.clientWidth)
 );
}
// Function to lazily load content
function lazyLoadContent() {
 const lazyContentElements = document.querySelectorAll(".lazy-content");
 lazyContentElements.forEach((element) => {
  if (isElementInViewport(element)) {
   // Add your logic to load the content for the element here
   element.classList.add("loaded");
  }
 });
}
// Attach the lazyLoadContent function to the scroll event
window.addEventListener("scroll", lazyLoadContent);
// Call the function initially to load the visible content on page load
lazyLoadContent();

همانطور که مشاهده می‌کنید در این روش المان‌های داخل ویوپورت را بررسی کرده و در صورت وجود آن‌ها محتوای مربوطه بارگذاری خواهد شد. استفاده کردن از این روش بسیار ساده بوده و می‌توانید پشتیبانی کامل در آن را نیز مشاهده کنید.

چه زمانی نیاز است که از بارگذاری آهسته استفاده کنید

دانستن اینکه دقیقا چه زمانی به Lazy Loading نیاز خواهید داشت یکی از موضوعات مهم و اصلی در پیاده سازی این تکنولوژی است. در بسیاری از حالت‌ها اگر شما ندانید که در چه قسمتی باید از این حالت استفاده کنید ممکن است بیشتر از اینکه به نفع‌تان باشد به ضررتان تمام خواهد شد. از این جهت پیشنهاد می‌کنم مقاله «Lazy Loading چیست؟ بررسی جزئی Lazy Loading و چگونگی کارکرد آن» را مطالعه کنید تا دقیقا با مزایا و معایب و استفاده‌های Lazy Loading آشنایی پیدا بکنید.

در پایان

در این مقاله ما به بررسی دو روش برای پیاده سازی Lazy Loading در جاوا اسکریپت پرداختیم. روش‌های دیگری نیز برای پیاده سازی این حالت وجود دارد که با جستجو کردن می‌توانید آن‌ها را نیز پیدا کنید. اما دو مورد ذکر شده جزو استانداردهای اصلی برای ایجاد حالت Lazy Loading‌ در وبسایت هستند.