JavaScript Academy · درس

التحميل الكسول للصور

حمّلوا الصور عند ظهورها فقط.

التحميل الكسول للصور درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

فكرة التحميل الكسول

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

تخزين عنوان URL الحقيقي

الفكرة هي ألّا تضع عنوان URL الحقيقي للصورة في src مبدئيًا. خزّنه في سمة data-src حتى لا ينزّله المتصفح بعد.

// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.

تحديد الصور ذات التحميل الكسول

اجمع كل الصور التي تحتاج إلى تحميل كسول. ومن الأساليب الشائعة استخدام فئة مشتركة أو التحقق من وجود data-src.

const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');

إنشاء المراقب

أنشئ مراقبًا تحمّل دالة الاستدعاء الخاصة به الصورة الحقيقية بمجرد تقاطعها. استخدم rootMargin لبدء تحميل الصورة قبل ظهورها بقليل.

const observer = new IntersectionObserver((entries, obs) => {
  // handle entries here
}, { rootMargin: '100px' });

التحميل عند التقاطع

عندما تتقاطع الصورة، انسخ قيمة data-src إلى src. عندها ينزّل المتصفح الصورة ويعرضها.

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // triggers the download
    }
  });
}, { rootMargin: '100px' });

إيقاف المراقبة بعد التحميل

بعد تحميل الصورة، لا حاجة إلى مراقبتها مجددًا. استدعِ unobserve لتحرير الموارد ومنع تشغيل الإجراء مرة أخرى.

if (entry.isIntersecting) {
  const img = entry.target;
  img.src = img.dataset.src;
  obs.unobserve(img); // done watching this one
}

بدء المراقبة

كرّر على كل صورة ذات تحميل كسول وابدأ مراقبتها. وسيتولى المراقب بقية العمل أثناء تمرير المستخدم.

lazyImages.forEach(img => observer.observe(img));

عرض عنصر نائب

وفّر تجربة سلسة بعرض عنصر نائب صغير ضبابي أو بلون موحّد أثناء تحميل الصورة الحقيقية، ثم أظهرها تدريجيًا عند وقوع حدث load للصورة.

img.addEventListener('load', () => {
  img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;

السمة loading الأصلية

تدعم المتصفحات الحديثة أيضًا التحميل الكسول الأصلي من خلال loading="lazy" على img وiframe. ويظل Intersection Observer مفيدًا للتحكم المخصص أو الرسوم المتحركة أو سلوك التوافق الاحتياطي.

// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">

// Observer approach gives more control and effects.

تنظيف data-src

بعد التحميل، يمكنك إزالة السمة data-src للحفاظ على ترتيب DOM وتجنب الالتباس في التعليمات البرمجية أو الاستعلامات اللاحقة.

img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);

النمط الكامل

يمثل التحميل الكسول باستخدام Intersection Observer نمطًا مرتبًا وفعالًا: خزّن عناوين URL في data-src، وراقب كل صورة، واستبدل عنوان URL بالعنوان الحقيقي عند التقاطع، ثم أوقف المراقبة. والنتيجة صفحة أسرع تُحمّل الصور في الوقت المناسب تمامًا.

اختبار سريع

اختبر مدى فهمك للتحميل الكسول للصور.

مراجعة

لقد نفّذت التحميل الكسول للصور:

خزّن عنوان URL الحقيقي في data-src.
راقب كل صورة باستخدام Intersection Observer.
عند التقاطع، انسخ data-src إلى src واستدعِ unobserve.
استخدم rootMargin للتحميل المسبق قبل الظهور مباشرةً.
تُعد loading="lazy" الأصلية بديلًا أبسط.

سننفّذ بعد ذلك التمرير اللانهائي.

الأسئلة الشائعة

هل درس «التحميل الكسول للصور» مجاني؟

نعم — نص درس «التحميل الكسول للصور» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «التحميل الكسول للصور»؟

حمّلوا الصور عند ظهورها فقط. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «التحميل الكسول للصور»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy