اسنیپت‌های بهینه‌سازی شده برای Lazy Loading تصاویر در JS

✨ نقشه راه Lazy Loading تصاویر: از صفر تا بهینه ✨

╔═════════════════════════════════════════════════════════════════════════╗
║                   🚀 Lazy Loading تصاویر: چکیده‌ای برای حرفه‌ای‌ها 🚀                    ║
╠═════════════════════════════════════════════════════════════════════════╣
║ 🎯 هدف: افزایش سرعت بارگذاری صفحه، بهبود UX و کاهش مصرف منابع سرور و کلاینت.    ║
╠═════════════════════════════════════════════════════════════════════════╣
║ 1️⃣ روش ناتیو (Native): ساده‌ترین و بهترین شروع.
║    <img loading="lazy" src="placeholder.jpg" data-src="actual.jpg" ...>
║    ✅ مزایا: عدم نیاز به JS، پشتیبانی عالی مرورگرها.
║    ⛔ محدودیت: کنترل کمتر، fallback برای مرورگرهای قدیمی.
╠═════════════════════════════════════════════════════════════════════════╣
║ 2️⃣ Intersection Observer API: قدرت JS برای کنترل دقیق‌تر.
║    (کد نویسی با Observer برای بارگذاری هوشمند تصاویر)
║    ✅ مزایا: عملکرد بالا، بهینه‌سازی دقیق، UX منعطف.
║    ⛔ محدودیت: نیاز به JS، polyfill برای مرورگرهای خیلی قدیمی.
╠═════════════════════════════════════════════════════════════════════════╣
║ 3️⃣ تصاویر پس‌زمینه (Background Images):
║    (استفاده از CSS و Observer برای کنترل بارگذاری background-image)
║    ✅ مزایا: طراحی‌های پیچیده‌تر، جداسازی محتوا از پرزنتیشن.
║    ⛔ محدودیت: چالش‌های سئو، نیاز به تکنیک‌های خاص.
╠═════════════════════════════════════════════════════════════════════════╣
║ 4️⃣ بهینه‌سازی‌های تکمیلی:
║    🔸 Placeholderها: تاری، رنگی یا تصاویر کم‌حجم برای جلوگیری از "پرش محتوا" (CLS).
║    🔸 Responsive Images: با srcset و sizes، تصاویر مناسب برای هر دستگاه.
║    🔸 فرمت‌های نوین: استفاده از WebP یا AVIF برای حجم کمتر.
╠═════════════════════════════════════════════════════════════════════════╣
║ 🛠️ عیب‌یابی سریع:
║    🔹 تصاویر بارگذاری نمی‌شن؟ ➡️ `data-src` رو چک کن.
║    🔹 پرش محتوا داری؟ ➡️ ابعاد تصویر رو مشخص کن (width/height).
║    🔹 سئو مشکل خورده؟ ➡️ مطمئن شو تصاویر در نهایت لود می‌شن.
╚═════════════════════════════════════════════════════════════════════════╝

        

مثال: پیاده‌سازی Native Lazy Loading

<!-- تصویر معمولی که بلافاصله لود می‌شود -->
<img src="/images/hero-banner.jpg" alt="بنر اصلی" width="1200" height="600">

<!-- تصویر با Lazy Loading ناتیو -->
<img src="/images/placeholder.jpg"
     data-src="/images/content-image-1.jpg"
     alt="تصویر محتوا 1"
     width="800"
     height="450"
     loading="lazy">

<img src="/images/placeholder.jpg"
     data-src="/images/content-image-2.jpg"
     alt="تصویر محتوا 2"
     width="800"
     height="450"
     loading="lazy">

<!-- و الی آخر برای بقیه تصاویر ... -->

نکته: همیشه `width` و `height` رو برای جلوگیری از CLS (Cumulative Layout Shift) مشخص کن. همچنین، می‌تونی از یه تصویر `placeholder.jpg` کم‌حجم به عنوان `src` اولیه استفاده کنی و تصویر اصلی رو تو `data-src` نگه داری. مرورگرهای قدیمی که `loading=”lazy”` رو پشتیبانی نمی‌کنن، `data-src` رو نادیده می‌گیرن و همون `src` (placeholder) رو لود می‌کنن. برای بارگذاری تصویر اصلی در این مرورگرها نیاز به Fallback با جاوااسکریپت داریم.

مثال: پیاده‌سازی Lazy Loading با Intersection Observer

// 1. انتخاب تمامی تصاویر با کلاس 'lazy-load'
const lazyImages = document.querySelectorAll('img[data-src].lazy-load');

// 2. تنظیمات Observer (اختیاری)
// روت: المان روت برای مشاهده تقاطع (null یعنی viewport)
// rootMargin: میزان حاشیه‌ای که به روت اضافه یا کم می‌شود (مثلاً '200px' یعنی 200px قبل از ورود به viewport لود کن)
// threshold: آستانه تقاطع (یک عدد بین 0 و 1، مثلاً 0.5 یعنی وقتی 50% المان در viewport بود)
const observerOptions = {
    root: null,
    rootMargin: '200px 0px', // 200px قبل از اینکه تصویر واقعاً وارد viewport بشه، لودش کن
    threshold: 0.01 // وقتی 1% تصویر در viewport بود، callback رو اجرا کن
};

// 3. تابع Callback که در هنگام تقاطع اجرا می‌شود
function handleIntersect(entries, observer) {
    entries.forEach(entry => {
        if (entry.isIntersecting) { // اگر المان وارد viewport شد (یا به rootMargin رسید)
            const img = entry.target;
            const src = img.getAttribute('data-src');
            if (src) {
                img.src = src; // سورس اصلی را جایگزین src placeholder کن
                img.classList.remove('lazy-load'); // کلاس lazy-load رو حذف کن
                img.removeAttribute('data-src'); // data-src رو حذف کن
                observer.unobserve(img); // دیگه این تصویر رو observe نکن
            }
        }
    });
}

// 4. ساخت آبجکت Observer
const imageObserver = new IntersectionObserver(handleIntersect, observerOptions);

// 5. Observer کردن هر تصویر
lazyImages.forEach(img => {
    imageObserver.observe(img);
});

نکته: برای این روش، تگ‌های `<img>` شما باید شبیه به این باشند:
<img src="placeholder.jpg" data-src="actual.jpg" alt="..." class="lazy-load">
اینجا `src` یک تصویر کم‌حجم یا خالی (مثلاً یک SVG اینلاین) و `data-src` مسیر تصویر اصلی است.

مثال: پیاده‌سازی Fallback برای Intersection Observer

if ('IntersectionObserver' in window) {
    // کد Intersection Observer بالا را اینجا قرار دهید
    // (فقط برای مرورگرهای مدرن که از آن پشتیبانی می‌کنند)
    // ...
} else {
    // Fallback برای مرورگرهای قدیمی:
    // تمامی تصاویر lazy-load را بلافاصله بارگذاری کنید
    const lazyImages = document.querySelectorAll('img[data-src].lazy-load');
    lazyImages.forEach(img => {
        const src = img.getAttribute('data-src');
        if (src) {
            img.src = src;
            img.classList.remove('lazy-load');
            img.removeAttribute('data-src');
        }
    });
    // یا می‌توانید از روش‌های قدیمی‌تر lazy loading مثل event listener 'scroll' استفاده کنید
}

نکته: در روش Fallback، ما تصمیم گرفتیم همه تصاویر را بلافاصله بارگذاری کنیم. این بهترین راه حل برای پرفورمنس نیست، اما اطمینان می‌دهد که تصاویر برای همه کاربران نمایش داده می‌شوند. اگر بهینه (غلط املایی ۳: بهینه‌سازی) برای مرورگرهای قدیمی‌تر خیلی حیاتی است، باید از Polyfill برای `Intersection Observer` استفاده کنید یا یک اسکریپت Lazy Loading مبتنی بر اسکرول ایونت بنویسید (که توصیه نمی‌شود).

مثال: Lazy Loading برای تصاویر پس‌زمینه

// HTML:
// <div class="hero-section lazy-background" data-background="/images/bg-hero.jpg"></div>

// CSS (برای placeholder یا ابعاد):
// .hero-section {
//     min-height: 400px;
//     background-color: #f0f0f0; // Placeholder color
//     background-size: cover;
//     background-position: center;
// }

// JavaScript:
const lazyBackgrounds = document.querySelectorAll('.lazy-background[data-background]');

const backgroundObserverOptions = {
    root: null,
    rootMargin: '100px 0px', // کمی قبل از ورود به viewport لود شود
    threshold: 0.01
};

function handleBackgroundIntersect(entries, observer) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const element = entry.target;
            const bgUrl = element.getAttribute('data-background');
            if (bgUrl) {
                element.style.backgroundImage = `url('${bgUrl}')`;
                element.classList.remove('lazy-background');
                element.removeAttribute('data-background');
                observer.unobserve(element);
            }
        }
    });
}

const backgroundObserver = new IntersectionObserver(handleBackgroundIntersect, backgroundObserverOptions);

lazyBackgrounds.forEach(bgElement => {
    backgroundObserver.observe(bgElement);
});

نکته: مطمئن شو که المان‌های پس‌زمینه، ارتفاع یا `min-height` مشخصی داشته باشن تا `Intersection Observer` بتونه درست کار کنه.

مثال: ترکیب Lazy Loading با Responsive Images

<img src="placeholder.jpg"
     data-srcset="/images/img-480w.jpg 480w,
                  /images/img-800w.jpg 800w,
                  /images/img-1200w.jpg 1200w"
     data-sizes="(max-width: 600px) 480px,
                  (max-width: 1200px) 800px,
                  1200px"
     alt="تصویر بهینه‌سازی شده"
     width="1200"
     height="800"
     class="lazy-load"
     loading="lazy">

<script>
    // فرض می‌کنیم تابع Intersection Observer شما وجود دارد و
    // به جای img.src = src; از img.srcset = img.getAttribute('data-srcset'); استفاده می‌کند
    // و همچنین img.sizes = img.getAttribute('data-sizes');
    // ...
</script>

نکته: وقتی از `loading=”lazy”` استفاده می‌کنی، بهتره `srcset` و `sizes` رو هم اول تو `data-srcset` و `data-sizes` بزاری و وقتی تصویر لود شد، منتقلشون کنی. مرورگر خودش تشخیص میده کدوم تصویر رو از `srcset` لود کنه.
برای یادگیری بیشتر در مورد کدهای آماده و اسنیپت جاوااسکریپت و بهینه‌سازی می‌تونی به منابع تخصصی ما سر بزنی.

مثال: تگ <picture> با Lazy Loading

<picture>
    <source data-srcset="/images/image.avif" type="image/avif">
    <source data-srcset="/images/image.webp" type="image/webp">
    <img src="placeholder.jpg"
         data-src="/images/image.jpg"
         alt="تصویر وب‌پ و آویف"
         width="1200"
         height="800"
         loading="lazy">
</picture>

<script>
    // وقتی تصویر لود شد، data-srcset رو به srcset منتقل کن
    // برای تگ های <source> و data-src رو به src برای <img>
    // این کار رو Intersection Observer شما باید هندل کند.
</script>

⚠️ لیست مشکلات و راه‌حل‌ها ⚠️

• 🔴 مشکل: تصاویر Lazy Load شده، اصلاً لود نمیشن.

  ✅ راه‌حل:
  اولین چیزی که باید چک کنی، اینه که آیا `data-src` (یا `data-srcset` و `data-sizes`) رو درست تنظیم کردی یا نه. مطمئن شو که مسیر عکس تو این `attribute`ها صحیحه. دوم، اسکریپت جاوااسکریپتت رو با کنسول مرورگر دیباگ کن ببین اروری وجود داره یا نه. شاید `querySelectorAll` المان‌ها رو پیدا نمی‌کنه یا `observer.observe` درست کار نمی‌کنه.

• 🔴 مشکل: تصاویر با تأخیر زیادی لود میشن، حتی وقتی کاربر بهشون نزدیک شده.

  ✅ راه‌حل:
  اگه از `Intersection Observer` استفاده می‌کنی، مقدار `rootMargin` رو افزایش بده. مثلاً به جای `rootMargin: ‘0px 0px’`, از `’200px 0px’` استفاده کن. این یعنی تصویر ۲۰۰ پیکسل قبل از اینکه واقعاً وارد ویوپورت بشه، شروع به لود شدن می‌کنه و حس بهتری به کاربر میده.

• 🔴 مشکل: صفحه بعد از لود شدن تصاویر، پرش (Layout Shift) داره.

  ✅ راه‌حل:
  این همون CLS معروفه! باید ابعاد `width` و `height` رو برای تگ `<img>` مشخص کنی. حتی اگه تصویر Lazy Load میشه، مرورگر می‌تونه فضای لازم رو براش رزرو کنه. استفاده از Placeholderها با ابعاد ثابت هم کمک می‌کنه.

• 🔴 مشکل: سئو سایت با Lazy Loading مشکل پیدا کرده، تصاویر تو گوگل ایمیج نشون داده نمیشن.

  ✅ راه‌حل:
  ربات‌های گوگل معمولاً جاوااسکریپت رو اجرا می‌کنن، پس `Intersection Observer` مشکلی نداره. اما برای اطمینان بیشتر:

  1. مطمئن شو که `data-src` و `alt` رو درست تنظیم کردی.
  2. از Fallback مناسب برای مرورگرها/ربات‌هایی که JS رو کامل اجرا نمی‌کنن، استفاده کن (مثلاً همه تصاویر رو بلافاصله لود کن).
  3. از ابزارهایی مثل Google Search Console برای بررسی نحوه ایندکس شدن تصاویرت استفاده کن.
• 🔴 مشکل: Lazy Loading برای اولین تصویر (LCP) هم اعمال میشه و سرعت اولیه رو کم می‌کنه.

  ✅ راه‌حل:
  این یه اشتباه رایجه! تصاویری که در بالای صفحه (Above-the-fold) و بلافاصله در ویوپورت اولیه کاربر قابل مشاهده هستن، نباید Lazy Load بشن. برای این تصاویر از `loading=”eager”` (یا اصلا هیچ `loading`ی) استفاده کن. این باعث میشه LCP (Largest Contentful Paint) بهبود پیدا کنه.

سوالات متداول (FAQ) درباره Lazy Loading تصاویر