استخدام طريقة \"التحميل الكسول\" مع الصور خارج الشاشة

Katie Hempenius

لمتابعة هذا الدرس التطبيقي حول الترميز، افتح هذا الخطأ في علامة تبويب ثانية في علامة تبويب ثانية.

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

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

إضافة النص البرمجي للتشغيل الكسول إلى الصفحة

• انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.

سبق أن تم تنزيل "lazysizes.min.js" وإضافته إلى هذا الخطأ. لتضمينه في الصفحة:

• أضِف العلامة <script> التالية إلى index.html:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

ملاحظة: سبق أن تمت إضافة ملف lazysizes.min.js إلى هذا المشروع، لذلك لا حاجة إلى إضافته بشكل منفصل. بإمكان النص البرمجي الذي أضفته للتو استخدام هذا النص البرمجي.

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

تحديد الصور باستخدام طريقة "التحميل الكسول"

• أضِف الفئة lazyload إلى الصور التي يجب تحميلها باستخدام طريقة التحميل الكسول. بالإضافة إلى ذلك، غيِّر السمة src إلى data-src.

على سبيل المثال، ستبدو التغييرات في flower3.png على النحو التالي:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

في هذا المثال، جرِّب طريقة "التحميل الكسول" مع flower3.png وflower4.jpg و flower5.jpg.

ملاحظة: قد تتساءل عن سبب ضرورة تغيير السمة src إلى data-src. وإذا لم يتم تغيير هذه السمة، سيتم تحميل جميع الصور على الفور بدلاً من تحميلها باستخدام طريقة "التحميل الكسول". إنّ السمة data-src ليست سمة يتعرّف عليها المتصفّح، لذا عندما يصادف علامة صورة مع هذه السمة، لا يتم تحميل الصورة. في هذه الحالة، هذا أمر جيد، لأنّه يسمح بعد ذلك للنص البرمجي "الكسول" بتحديد وقت تحميل الصورة بدلاً من المتصفّح.

أمثلة واقعية

أكملت هذه الخطوة. للاطلاع على هذه التغييرات بشكل عملي، يُرجى اتباع الخطوات التالية:

• لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .

• افتح وحدة التحكم وابحث عن الصور التي تمت إضافتها للتو. ومن المفترض أن تتغيّر صفوفهم من lazyload إلى lazyloaded أثناء الانتقال إلى أسفل الصفحة.

• راقب لوحة الشبكة لمشاهدة تحميل ملفات الصور بشكل فردي أثناء التمرير لأسفل الصفحة.

إثبات الملكية باستخدام Lighthouse

أخيرًا، من الأفضل استخدام Lighthouse للتحقّق من هذه التغييرات. سيشير تدقيق الأداء "تأجيل الصور خارج الشاشة" من أداة Lighthouse إلى ما إذا كنت قد نسيت إضافة طريقة"التحميل الكسول" إلى أي صور خارج الشاشة.

1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .
2. اضغط على "Control+Shift+J" (أو "Command+Option+J" على أجهزة Mac) لفتح "أدوات مطوري البرامج".
3. انقر على علامة التبويب Lighthouse.
4. تأكّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
5. انقر على زر إنشاء تقرير.
6. تحقَّق من اجتياز تدقيق تأجيل الصور خارج الشاشة.

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