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

"كاتي هيمبينيوس"

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

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

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

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

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

سبق أن تم تنزيل 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. تحقَّق من اجتياز تدقيق تأجيل الصور خارج الشاشة.

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