مراقب التقاطع: تعقب عناصر التمرير في العرض

و "مراقب التقاطع" يوفر وسيلة لمراقبة غير متزامنة التغييرات في تقاطع (تداخل) من العناصر. يمكن أن يكون هذا في ما يتعلق بالعناصر الأخرى، أو إطار العرض. في هذه المقالة سوف نلقي نظرة على عدد قليل من العروض وناقش أهمية أن مراقب تقاطع سيلعب في المستقبل لمطوري الويب. سوف أشارك أيضا أمثلة التعليمات البرمجية للمساعدة في البدء في تلك الجلسات في وقت متأخر من الليل التجريب. دعونا الغوص في!

ما الذي يمكن لمراقب التقاطع القيام به؟

تتيح لك واجهه برمجه التطبيقات الخاصة بالمراقبة المتداخلة تسجيل داله رد الاتصال التي يتم تنفيذها عندما يدخل عنصر يتم مراقبته أو يخرج عنصر آخر أو منفذ العرض.

هناك الكثير من الأفكار والاقتراحات المشتركة في هذه الوثيقة W3C المفسر وثيقة على جيثب، ومع ذلك، يمكن أن يكون مفترق تقاطع مفيد لبناء أصلا من الميزات مثل:

• Lazy Loading
• Infinite Scrolling
• Reporting Visibility/Location
• Executing Animations

تحقق من هذا العرض من قبل دان كالاهان لتوضيح ما نتحدث عنه:

للبدء مع المراقب المتقاطع دعوانا استكشاف الخطوات المناسبة الترميز المطلوبة. يمكنك دائما التأكد من المتصفحات المقصود / الأجهزة دعم إو إو عن طريق الرجوع كانيوس. سنبدأ بإنشاء مراقب ومناقشة كيفية استخدامه لمراقبة المكونات.

إنشاء مراقب

المراقب المتقاطع يبدا بطلب مجموعه من الخيارات المعرفة ككائن حرفي وتمريرها كوسيطه لكائن المراقبة المحدد.

1

let options = {

2

  root: null, // relative to document viewport 

3

  rootMargin: '0px', // margin around root. Values are similar to css property. Unitless values not allowed

4

  threshold: 1.0 // visible amount of item shown in relation to root

5

};

6

7

let observer = new IntersectionObserver(callback, options);

هذه الخيارات مراقب على خطوط 2-4 سوف تملي بعض التفاصيل الهامة عندما يتعلق الأمر الكشف عن رؤية عنصر الهدف فيما يتعلق الجذر. تمثل الوسيطة الأولى من كائن المراقبة (السطر الأخير) استدعاء (وظيفة) يتم تنفيذه كما يتم استيفاء المتطلبات من قبل المراقب الخاص بك. الوسيطة الثانية تشير إلى كائن الحرفي الذي يحتوي على خيارات المراقب ويقبل الخصائص التالية:

• الجذر: العنصر الذي تريد اختبار التقاطع ضده. تشير قيمه null إلى منفذ العرض الخاص بالمستعرض. يمكنك أيضا تمرير في أساليب محدد DOM مثل المستند. محدد الاستعلام (' #mytargetobject ').
• الجذر التربيعي: إذا كنت بحاجه إلى توسيع أو تقليص الحجم الفعال للعنصر الجذري قبل الحوسبة التقاطعات. هذه القيم التي تم تمريرها تشبه خاصيه هامش CSS. إذا تم تحديد العنصر الجذر ، يمكن ان تكون القيم نسب مئوية.
• العتبة: اما رقم واحد أو مجموعه من الأرقام تشير إلى النسبة المئوية لرؤية الهدف فانها تؤدي إلى رد المراقب. قيمه 1.0 تعني ان الحد الأدنى غير الذي تم تمريره حتى يكون كل بيكسل مرئيا ، في حين ان 0 يعني ان العنصر خارج العرض تماما.

كما ذكرت سابقا، ستتعامل مع وسيطة رد الاتصال من خلال إنشاء وظيفة تحتوي على منطق مخصص بناء على احتياجات المشروع. يتم تنفيذ هذا المنطق في أي وقت يظهر عنصر (عناصر) مرصودة فيما يتعلق بالعنصر الجذر المحدد.

1

function onChange(changes, observer) {

2

    // logic goes here

3

}

4

5

let observer = new IntersectionObserver(onChange, options);

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

في كل مره يكتشف فيها المراقب تغييرا ، يتم الإبلاغ عن حدث تغييرات (نوع مثل داله () الإبلاغ عن كائن احداث) من رد الاتصال المراقب. باستخدام هذا الحدث المشغل ، يمكننا التحقق من وجود العنصر الخاص بنا بالنسبة إلى الجذر قبل تشغيل اي منطق إضافي عن طريق الكشف عن الخصائص في حدث التغيير. سيقوم بعض المطورين باستبدال التغييرات بإدخالات word بدلا من ذلك ، ولكن كلا النهجين يعملان بنفس الطريقة.

1

function onChange(changes, observer) {

2

    changes.forEach(change => {

3

        if (change.intersectionRatio > 0) {

4

            // your observer logic

5

        }

6

    });

7

}

تنص هذه الحلقة "لكل تغيير الكشف ، تحقق لمعرفه إذا كان العنصر الهدف مرئية حاليا (أكبر من 0) في علاقة إلى الجذر المعرفة." تساعد نسبه التقاطع في الإبلاغ عن مقدار العنصر المرئي باستخدام قيمه بين 0.0 (غير مرئية) و 1.0 (مرئية بالكامل). يمكنك التفكير في نسبه التقاطع تماما مثل الخاصية العتبة المحددة في خيارات المراقبة الخاصة بك.

أسلوب المراقبة

حتى الآن قمنا بإنشاء كائن خيارات ، وظيفة رد الاتصال وتعريف كائن المراقب ، ولكن ما زلنا لم يكن لديك اي شيء لمراقبه. هذا هو المكان الذي سياتي فيه أسلوب المراقبة في الخدمة.

1

let images = document.querySelectorAll('img');

2

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

وتضيف هذه الطريقة عنصرا إلى مجموعه العناصر المستهدفة التي يراقبها المراقب المتقاطع. في هذا المثال انا أراقب كل صوره علي الصفحة من خلال النتائج التي تم الحصول عليها من المرجع الصور المحدد. الأسلوب ملاحظه () سيتابع مراقبه الهدف حتى يحدث اي من الإجراءات التالية: يتم استدعاء الأساليب () أو قطع الاتصال () مع العنصر الهدف أو جذر التقاطع المحذوفة. إذا لم تعد بحاجه لمراقبه عنصر فمن الأفضل اجراء مكالمة للغاء المراقبة () وتمرير الهدف الخاص بك كوسيطه.

حالة الدعم

إذا كنت بحاجه إلى ميزه اختبار دعم هذا API يمكنك التفاف كل شيء في if/آخر العبارة الشرطية مثل ذلك:

1

if ('IntersectionObserver' in window) {

2

    // supported

3

} else {

4

    // not supported

5

}

منذ التقاطع المراقب API لا تزال موجودة في مشروع المرحلة العمل وانا أشجعكم علي ميزه الكشف عن نافذه الكائن ، أو يمكنك أيضا العثور علي التعبئات إذا كنت تفضل.

أمثلة حية

يحتوي العرض التوضيحي التالي على كافة التعليمات البرمجية التي ناقشتها حتى الآن مع بعض التعديلات الإضافية. تعرض هذه الأحمال التوضيحية كسول الصور عندما تعرض نسبة 50٪ من رؤيتها فيما يتعلق بإطار العرض.

قد تلاحظ سلوكا مختلفا عندما يتعلق الأمر إلى عناصر الصورة بالمقارنة مع عناصر img في كروم وفايرفوكس. كلا المتصفحين تحميل عناصر الصورة تماما ، ولكن الصورة يتجاهل عتبه لدينا حتى مع قيود الحجم المطلق تعريفها. ويبدو انها لتحميل عندما كنت حوالي 10 ٪ في الراي مقابل 50 ٪ عتبه المحددة في العرض. ترك التعليق أدناه إذا لاحظت هذا غرائب ، أو واجهت مشاكل مع المراقب المتقاطع والصورة علي وجه التحديد.

وهنا عرض آخر خلق سيناريو التمرير لانهائية أن الأحمال كسول الصور باستخدام أجاكس لتحميل الصور حسب الحاجة.

في هذا السيناريو ، وانا ادراج الحارس إلى DOM كما لاحظت هدفي. يتم وضع هذا الحارس بجانب العنصر الأخير داخل سكرولر لانهائية، وكما يأتي الحارس في الرأي، وإعادة الاتصال تحميل البيانات، يخلق البند (ق) المقبل، يعلقها على دوم وإعادة وضع الحارس. إذا قمت باعاده تدوير الحارس بشكل صحيح ، لا توجد مكالمات اضافيه للمراقبة () مطلوبه. فيما يلي مخطط كبير من قبل فريق مطوري Google للمساعدة في شرح هذا النهج بشكل مرئي.

مذكرة بشأن الصور

عند عنصر img مع قيد من العرض الأقصى: 100% يتم ملاحظه, فانه ستفشل في تحميل. وهذا يعني ان اي صور محمله بطريقه كسول يجب ان يكون القيود المحددة في CSS أو مضمنه وفقا لذلك المشكلة مع عناصر الصورة التي تفتقر إلى اي قيود هو ان هناك حجم الصفر قبل تحميل محتواها ؛ وهذا يعني انها تتقاطع جميع المنفذ في وقت واحد كما كنت التمرير. وأظن ان التي هي جزء من السبب لان هذه هي واحده من الطرق الرئيسية للحصول علي إحداثيات العنصر والقيود.

الاستنتاج

هل تستخدم إنترسكتيونوبسيرفر في العمل الخاص بك الحق في هذه اللحظة؟ هل أنت متحمس لهذه الميزة والإمكانيات التي يجلبها؟ هل يمكن إنترسكتيونوبسيرفر استبدال الحاجة إلى الميزات القائمة على الحدث مثل الموقف: لزجة؟ شخصيا أشعر أن أبي الجديد هو إضافة صلبة لمواصفاتنا وأنا أتطلع بفارغ الصبر إلى نموها المستمر على مدى السنوات المقبلة.

لقد قمت بتضمين بعض الروابط المفيدة أدناه وشجعكم على الغوص أعمق في وقت فراغك. سيساعدك كل رابط في اكتساب فهم أفضل لكيفية عمل واجهة برمجة التطبيقات الجديدة هذه ووظائفها. إذا كان لديك أي نصائح أو حيل للقراء الآخرين تركها في التعليقات أدناه. كما هو الحال دائما، والترميز سعيدة!

روابط

• LazyLoad (vanilla-lazyload)
• Intersection Observer Examples
  
• Lazy loading images using intersection observer by Dean Hume
• IntersectionObserver Sample
  
• Intersection Observer API on mozilla.org
• Lazy Loading Images with Intersection Observer by Cory Dowdy
• Using the Intersection Observer API to Trigger Animations and Transitions on Alligator.io
• IntersectionObserver’s Coming into View by Surma