HTML Academy · درس

التحميل الكسول للصور loading=lazy

تأجيل تحميل الصور خارج الشاشة باستخدام السمة الأصلية loading

التحميل الكسول للصور loading=lazy درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

سمة loading

<img loading="lazy" src="..."> يخبر المتصفح بتأجيل تنزيل الصورة حتى توشك على دخول نافذة العرض. ويجعل الدعم الأصلي في جميع المتصفحات الحديثة هذا أبسط مكسب في الأداء للصفحات كثيرة الصور.

كيفية تعريف «بالقرب من نافذة العرض»

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

متى لا ينبغي استخدام التحميل الكسول

لا تضبط loading="lazy" مطلقًا للصور الموجودة في الجزء الظاهر من الصفحة أو للصورة المرشحة لتكون LCP (largest contentful paint). إذ يؤخر التحميل المؤجل أهم عنصر مرئي، مما يضر بكلٍّ من السرعة المتصورة وCore Web Vitals.

العرض والارتفاع إلزاميان

لكي يكون التحميل الكسول فعالًا، حدّد للعنصر <img> قيمتي width وheight صريحتين، أو استخدم aspect-ratio في CSS. فمن دون أبعاد، لا يستطيع المتصفح حجز مساحة، وتؤدي عملية التمرير إلى إعادة تدفق التخطيط، كما تفشل آلية استدلال التحميل الكسول.

<img loading="lazy" src="cat.jpg" width="800" height="600" alt="A cat">

التحميل الكسول لـ iframe

تعمل السمة نفسها مع <iframe>. إذ يؤجل <iframe loading="lazy"> تحميل الخرائط والفيديوهات وعمليات التضمين الاجتماعية الموجودة أسفل الجزء الظاهر من الصفحة، وكلٌّ منها كان سيحمّل بخلاف ذلك ميغابايتات من JavaScript التابع لجهات خارجية مع كل عرض للصفحة.

eager هي القيمة الافتراضية

القيمة الافتراضية هي loading="eager"، أي التحميل فورًا، ونادرًا ما تُكتب صراحةً. وقد يكون ضبط eager للصور الموجودة في الجزء الظاهر من الصفحة مفيدًا بوصفه توثيقًا، إذ يشير إلى المراجعين إلى أن اختيار eager كان مقصودًا.

الدمج مع srcset

ينسجم التحميل الكسول تمامًا مع الصور المتجاوبة. فما يزال المتصفح يختار المرشح المناسب من srcset، لكنه يؤجل التنزيل فحسب. ولا حاجة إلى أي تنسيق إضافي بين loading="lazy" وsrcset.

<img
  loading="lazy"
  srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w"
  sizes="(min-width: 768px) 800px, 100vw"
  src="img-800.jpg"
  alt="Hero"
  width="800" height="600"
>

تلميح فك الترميز

اجمع التحميل الكسول مع decoding="async" للسماح للمتصفح بفك ترميز الصورة خارج الخيط الرئيسي. ويمنع ذلك حجب إدخال المستخدم أثناء التمرير عندما تصل صور كثيرة في الوقت نفسه بعد تمرير طويل ومتتابع.

صور الخلفية

لا يمكن تحميل CSS background-image تحميلًا كسولًا بطريقة أصلية. ولا يمثل ذلك مشكلة لخلفيات العناصر الرئيسية الموجودة في الجزء الظاهر من الصفحة، أما الخلفيات الموجودة أسفل الجزء الظاهر فاستخدم لها IntersectionObserver لاستبدال عنوان URL عندما يقترب العنصر من نافذة العرض.

سلوك الطباعة

عند طباعة الصفحة، يحمّل المتصفح كل صورة فورًا بغض النظر عن loading="lazy"، حتى تكون النسخة المطبوعة كاملة. ولا تحتاج إلى معالجة الصور ذات التحميل الكسول بصورة خاصة في أوراق أنماط الطباعة.

قياس الوفورات

يسرد تدقيق "Defer offscreen images" في Lighthouse كل صورة كان ينبغي ضبط loading="lazy" لها. ويُظهر ترشيح لوحة Network حسب "Img" مع عرض "Waterfall" عمليات التحميل المتتابعة التي ينتجها التحميل الكسول؛ إذ ينخفض عدد الطلبات الأولية انخفاضًا كبيرًا في معارض الصور.

اختبار المعرفة

لماذا يضر ضبط loading="lazy" لصورة رئيسية في أعلى الصفحة؟

ملخص

يُعد ضبط loading="lazy" لعناصر <img> و<iframe> الموجودة خارج نافذة العرض مكسبًا في الأداء باستخدام سمة واحدة. اجمعه مع width/height صريحين لحجز المساحة، وsrcset للاستجابة، وdecoding="async" للحفاظ على سلاسة التمرير. ولا تطبقه مطلقًا على صورة LCP أو أي عنصر ظاهر في نافذة العرض الأولية.

الأسئلة الشائعة

هل درس «التحميل الكسول للصور loading=lazy» مجاني؟

نعم — نص درس «التحميل الكسول للصور loading=lazy» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «التحميل الكسول للصور loading=lazy»؟

تأجيل تحميل الصور خارج الشاشة باستخدام السمة الأصلية loading تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «التحميل الكسول للصور loading=lazy»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy