JavaScript Academy · درس

مراقبة ظهور العناصر

أنشئوا مراقبًا وراقبوا العناصر.

الدرس 1 من 413 خطوة

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

لماذا Intersection Observer؟

كان اكتشاف دخول عنصر إلى إطار العرض يتطلب تقليديًا الاستماع إلى scroll واستدعاء getBoundingClientRect باستمرار، وهو أمر بطيء ويسبب تقطعًا.

تراقب Intersection Observer API مستوى الظهور بكفاءة وبشكل غير متزامن، خارج الخيط الرئيسي.

إنشاء Observer

تنشئون Observer باستخدام new IntersectionObserver(callback). ويُستدعى callback كلما تجاوز مستوى ظهور عنصر تتم مراقبته عتبة معينة.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

مراقبة عنصر

استدعوا observer.observe(element) لبدء مراقبة هدف. ويمكن لـ Observer واحد مراقبة عدة عناصر.

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

العلامة isIntersecting

يحتوي كل إدخال على قيمة منطقية باسم isIntersecting تخبركم بما إذا كان الهدف يتداخل حاليًا مع الجذر (ويكون إطار العرض هو الجذر افتراضيًا).

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

تفاصيل الإدخال

يحمل كل IntersectionObserverEntry بيانات مفيدة:

target — العنصر الذي تتم مراقبته
isIntersecting — ما إذا كان يتقاطع مع الجذر
intersectionRatio — مقدار الجزء المرئي (من 0 إلى 1)
boundingClientRect — مستطيل الهدف

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

خيار threshold

يتحكم خيار threshold في نسب الظهور التي تُستدعى عندها دالة الاستدعاء. تُستدعى عند ضبطه على 0 بمجرد ظهور بكسل واحد، بينما لا تُستدعى عند ضبطه على 1 إلا عند ظهور العنصر بالكامل.

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

خيار root

يقيس المراقب افتراضيًا بالنسبة إلى نافذة عرض المتصفح. اضبط root على عنصر سلف قابل للتمرير لقياس الظهور داخل ذلك العنصر بدلًا من ذلك.

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

خيار rootMargin

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

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

إيقاف المراقبة

استدعِ observer.unobserve(element) لإيقاف مراقبة عنصر واحد، أو observer.disconnect() لإيقاف مراقبة جميع العناصر. وهذا مهم لتنظيف الموارد ولعمليات التشغيل لمرة واحدة.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

سبب كفاءته

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

حالات الاستخدام الشائعة

يُستخدم Intersection Observer في العديد من الميزات الواقعية:

التحميل الكسول للصور وإطارات iframe
التمرير اللانهائي
الرسوم المتحركة التي يُشغّلها التمرير
تتبّع مرات ظهور الإعلانات أو المحتوى

سننفّذ العديد من هذه الميزات بعد قليل.

اختبار سريع

اختبر مدى فهمك لأساسيات Intersection Observer.

أجب عليها في الدرس التفاعلي

مراجعة

لقد تعلّمت أساسيات Intersection Observer:

ينشئ new IntersectionObserver(callback, options) مراقبًا.
يبدأ observe المراقبة، بينما يوقفها unobserve/disconnect.
يتيح كل إدخال الخاصيتين isIntersecting وintersectionRatio.
تضبط threshold وroot وrootMargin توقيت استدعائه.
يتمتع بكفاءة أعلى بكثير من مستمعي التمرير.

سنستخدمه بعد ذلك للتحميل الكسول للصور.

البدء مجانًا

تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا

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

الدورات: 59
الدروس: 200

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «مراقبة ظهور العناصر» مجاني؟

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

ماذا ستتعلم في «مراقبة ظهور العناصر»؟

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

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

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

كم من الوقت يستغرق درس «مراقبة ظهور العناصر»؟

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

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

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

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

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