يوم جيد يا اصدقاء!في هذه المقالة ، سنقدم واجهة Intersection Observer API ، وهي أداة جديدة قوية لتحميل الصور والعناصر الأخرى على الصفحة بتكاسل ، مدعومة من جميع المتصفحات الحديثة. يمكننا استخدام هذه الأداة للتحكم في رؤية العناصر من خلال تحديد التحميل الأولي أو المتأخر لمحتوى DOM الخاص بنا.مع تطور الويب ، تدعم المتصفحات المزيد والمزيد من الميزات وواجهات برمجة التطبيقات الجديدة ، ولكن لا يزال هناك شيء يضر المطورين - عرض DOM. عندما نبدأ في تطوير تطبيق جديد ، وإنشاء مكونات ، والتفكير في بنية HTML ، وعناصر النمط باستخدام CSS ، فإننا نفكر أيضًا في عملية العرض ، وكيف ستبدو صفحتنا بشكل عام ، وبعض الأشياء المهمة الأخرى التي تتطلب معالجة وتأثيرًا دقيقين تقديم التطبيق.وهذا بدوره يؤثر على كيفية إنشاء عناصرنا ، وكيفية تنظيم CSS ، والمكتبات والأطر التي سيتم استخدامها في المشروع ، وما إلى ذلك. هذا هو السبب في أن العرض مهم للغاية للمطورين.أحد أسباب شعبية مكتبة React في مجتمع المطورين هو حقيقة أنها تستخدم DOM افتراضي. في الجوهر ، هذا تمثيل افتراضي لـ DOM الحقيقي ، والذي يمكنك التحكم فيه كما يحلو لك. بعد كل التحديثات ، يقرر DOM الافتراضي التغييرات التي يجب إجراؤها على DOM الأصلي ، ويقوم بهذه التغييرات بطريقة "سلسة" ؛ ليست هناك حاجة لتحديث الصفحة بأكملها عند تغيير عنصر واحد. هذه واحدة من أهم مزايا رد الفعل على المكتبات والأطر الأخرى. عرض DOM هو مهمة مكلفة (من حيث الأداء) والتي تقوم بها React بشكل جيد دون أي مشاكل.تسمح لنا بعض المكتبات وواجهات برمجة التطبيقات بتحسين عرض عناصر تطبيقاتنا. سوف نتعرف على أحدهم - Intersection Observer API. ولكن أولاً ، دعونا نكتشف ما هو تحميل الصورة "البطيء".كيف يعمل تحميل الصور البطيئة؟
التحميل البطيء هو أحد أساليب عرض محتوى الصفحة. إن مفهوم التحميل "البطيء" هو أنه بدلاً من تحميل الصفحة بالكامل ، نقوم بتحميل الأجزاء الضرورية فقط ونؤجل (تأخير) تحميل الأجزاء المتبقية حتى يحتاجها المستخدم.مثال على التنزيل "البطيء" ، الذي ربما سمعت عنه أو واجهته ، هو التمرير اللامتناهي للصفحة. يعمل هذا شيئًا مثل هذا: يزور المستخدم الصفحة ، ويتم تحميل المحتوى الأولي ، وفقط بعد تمرير المستخدم للصفحة حتى النهاية ، يتم تحميل الجزء التالي من المحتوى. في هذه الحالة ، ليست هناك حاجة لتنزيل كل المحتوى مرة واحدة ، مما يسهل التطبيق بشكل كبير.إذا كان التنزيل "البطيء" يعمل على تنزيل المحتوى "من إنشاء المستخدم" فقط ، فما هي التقنية المعاكسة التي تسمى؟ سمع البعض عن التحميل البطيء من قبل ، لكنهم لم يسمعوا العكس. عكس التحميل "البطيء" هو التحميل "النشط" (الخيارات الأخرى غير صبور وسريعة الحركة) - عندما يتم تقديم كل المحتوى على الفور.هل تعلم أن هناك سمات HTML لتحميل الصور البطيئة؟ لاستخدامها ، ما عليك سوى إضافة loading = "lazy" إلى عنصر "img" أو "iframe".
باستخدام هذه التقنية ، نحصل على العديد من المزايا: تحميل الموارد الضرورية فقط يقلل من استهلاك الذاكرة ، وفي النهاية ، وقت تحميل الصفحة. كما يمنع عرض التعليمات البرمجية "التي لم تتم المطالبة بها" ، مما يحسن التطبيق للعمل في ظروف النطاق الترددي المنخفض للشبكة. ومع ذلك ، هناك بعض العوائق: يمكن أن يؤثر ذلك على ترتيب الصفحة بواسطة محركات البحث. بالإضافة إلى ذلك ، يستغرق الأمر بعض الوقت لاختيار المكتبة أو واجهة برمجة التطبيقات المناسبة للعمل معها.واجهة برمجة تطبيقات Intersection Observer
جافا سكريبت تتطور بسرعة كبيرة لدرجة أننا نحصل على واجهة برمجة تطبيقات جديدة كل عام تقريبًا. الهدف الرئيسي من واجهات برمجة التطبيقات الجديدة هو المساعدة في إنشاء تطبيقات وصفحات رائعة.Intersection Observer هي واجهة برمجة تطبيقات تتيح لك مراقبة مستوى رؤية عناصر DOM وموضعها. الشيء هو أنها تعمل بشكل غير متزامن ، مما يسمح لك بتغيير رؤية العناصر بسلاسة (غير محسوسة) ، وتحديد التحميل الأولي أو المتأخر لمحتوى DOM الخاص بنا.
قبل بضع سنوات ، لم يكن لدينا واجهة برمجة تطبيقات أو أداة أخرى لتحديد موضع عنصر وتتبعه. كان علينا كتابة وظائف مجنونة وضخمة ، وخلق طرق باهظة الثمن (من حيث الأداء) التي خلقت المزيد من المشاكل. باستخدام واجهة Intersection Observer API ، يمكننا القيام بأشياء رائعة مثل:- التمرير اللانهائي للصفحة - إنشاء التمرير اللانهائي للجداول والقوائم وحاويات الشبكة وما إلى ذلك. لن تكون سهلة للغاية.
- الصور - لماذا تحمّل جميع الصور مرة واحدة ، بينما يمكنك استخدام التنزيل "البطيء" وعرض المحتوى الذي يحتاجه المستخدم فقط في الوقت الحالي؟
- عناصر المراقبة - يمكنك مراقبة العناصر الموجودة على الصفحة. على سبيل المثال ، قد تتلقى رسائل حول إغلاق الإعلانات.
هنا يبدأ كل شيء:let myFirstObserver = new IntersectionObserver(callback, options)
نقوم بتهيئة مُنشئ IntersectionObserver وتمرير معلمتين إليه. المعلمة الأولى هي وظيفة رد الاتصال ، والتي يتم استدعاؤها استجابة لتقاطع عنصرنا مع إطار العرض (أي عندما يتجاوز العنصر حدود إطار العرض) أو مع عنصر آخر. معلمة الخيارات عبارة عن كائن يتحكم في شروط تشغيل وظيفة رد الاتصال. يحتوي هذا الكائن على الحقول التالية:- الجذر - العنصر الرئيسي الذي يعمل بمثابة إطار العرض للعنصر الهدف (للعنصر الذي نلاحظه)
- rootMargin - الهامش الخارجي حول عنصر الجذر (قيم هذا الحقل تشبه قيم الهامش في CSS). يمكن أن تتغير هذه القيم لكل جانب من الجذر قبل تنفيذ التقاطع.
- الحد - عدد أو مجموعة من الأرقام التي تحدد النسبة المئوية لتقاطع العنصر الهدف مع العنصر الجذر ، حيث يتم تشغيل وظيفة رد الاتصال
دعنا نلقي نظرة على استخدام Intersection Observer API:let options = {
root: document.querySelector('.scroll-list'),
rootMargin: '5px',
threshold: 0.5
}
let myFirstObserver = new IntersectionObserver(elements => { elements.forEach(element => console.log('element', element)) }, options)
لبدء "مراقبة" عنصر ، تحتاج إلى تحديد الهدف والاتصال بالمراقب باستخدام طريقة "المراقبة" ، وتمرير الهدف كمعلمة:let myDivTarget = document.querySelector('.header')
observer.observe(myDivTarget)
يجب أن نتذكر أن جميع العناصر التي لاحظها المراقب هي مستطيلات. تتناسب العناصر ذات الشكل غير المنتظم مع أصغر مستطيل.ماذا عن دعم المتصفح؟ يدعم Intersection Observer API جميع المتصفحات الحديثة مثل Chrome و Edge و Firefox و Opera.
إذا كنت تنوي العمل مع الكثير من البيانات ، على سبيل المثال ، مع جدول يحتوي على الكثير من المعلومات ، فإن Intersection Observer API ستكون مفيدة للغاية بالنسبة لك.واحدة من مزايا واجهة برمجة التطبيقات هذه هي أنه لحل هذه المشاكل ، لم تعد بحاجة إلى استخدام أي مكتبة.استنتاج
لقد درسنا واجهة برمجة تطبيقات Intersection Observer واستخدامه في التحميل البطيء ، ومراقبة وضع عناصر DOM ، وما إلى ذلك. تدعم المتصفحات المزيد والمزيد من واجهات برمجة التطبيقات التي تقلل وقت عرض الصفحة ، بشكل أساسي للمستخدمين الذين لديهم اتصال بطيء ، مما يقلل من حجم المشروع ويعرض فقط المحتوى ذي الصلة.من مترجم: بدت لي المقالة غير كافية بالمعلومات ، لذا هنا روابط لأدب إضافي:شكرآ لك على أهتمامك.