إنّ "التحميل الكسول" هو أسلوب انتظار لتحميل الموارد إلى أن تكون هناك حاجة إليها، بدلاً من تحميلها مُسبقًا. ويمكن أن يؤدي ذلك إلى تحسين الأداء عن طريق تقليل مقدار الموارد التي يجب تحميلها وتحليلها عند التحميل الأولي للصفحة.
وتُعد الصور التي تكون خارج الشاشة أثناء التحميل الأولي للصفحة مناسبة تمامًا لهذا الأسلوب. والأفضل من ذلك هو أنّ الكسول يجعل تنفيذ هذه الاستراتيجية سهلة للغاية.
إضافة النص البرمجي الكسول إلى الصفحة
- انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.
سبق أن تم تنزيل lazysizes.min.js
وإضافته إلى هذا الخلل. لتضمينه في الصفحة:
- إضافة علامة
<script>
التالية إلىindex.html
:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
سيعمل "الكسول" على تحميل الصور بذكاء بينما يتنقّل المستخدم في الصفحة وترتيب أولويات الصور التي سيصادفها المستخدم قريبًا.
تحديد الصور باستخدام طريقة "التحميل الكسول"
- أضِف الفئة
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
.
أمثلة واقعية
أكملت هذه الخطوة. للاطّلاع على هذه التغييرات عمليًا، يُرجى اتّباع الخطوات التالية:
لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .
افتح وحدة التحكم وابحث عن الصور التي تمت إضافتها للتوّ. ويجب أن تتغير صفوفهم من
lazyload
إلىlazyloaded
أثناء الانتقال لأسفل الصفحة.
- راقِب لوحة الشبكة لمشاهدة تحميل ملفات الصور بشكل فردي أثناء الانتقال للأسفل في الصفحة.
إثبات الملكية باستخدام Lighthouse
أخيرًا، ننصحك باستخدام أداة Lighthouse للتحقّق من هذه التغييرات. سيوضّح نظام التدقيق في أداء "تأجيل الصور خارج الشاشة" من Lighthouse ما إذا كنت قد نسيت إضافة ميزة"التحميل الكسول" إلى أي صور خارج الشاشة.
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .
- اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
- انقر على علامة التبويب Lighthouse.
- تأكّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
- انقر على زر إنشاء تقرير.
- تحقَّق من اجتياز تدقيق تأجيل الصور خارج الشاشة.
اكتمال عملية النقل بنجاح لقد استخدمت طريقة \"التحميل الكسول\" مع الصور في صفحتك.