طريقة \"التحميل الكسول\" للصور على مستوى المتصفّح على الويب

يمكنك استخدام السمة loading لتحميل الصور باستخدام طريقة "التحميل الكسول" بدون الحاجة إلى كتابة رمز برمجي مخصّص للتحميل الكسول أو استخدام مكتبة JavaScript منفصلة إليك العرض التوضيحي للميزة:

تتناول هذه الصفحة تفاصيل تنفيذ التحميل الكسول في المتصفّح.

ما هي أهمية التحميل الكسول على مستوى المتصفّح؟

وفقًا لأرشيف HTTP، والصور هي أنواع مواد العرض الأكثر طلبًا في معظم المواقع الإلكترونية، وعادةً ما تستهلك معدل نقل بيانات أكبر من أي مورد آخر. وفي الشريحة المئوية التسعين، تستعين المواقع الإلكترونية إرسال أكثر من 5 ميغابايت من الصور على أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة

في السابق، كانت هناك طريقتان لتأجيل تحميل الصور خارج الشاشة:

• استخدام Intersection Observer API
• استخدام معالِجات أحداث scroll أو resize أو orientationchange

ويمكن أن يتيح كلا الخيارين للمطورين تضمين سلوك التحميل الكسول، فضلاً عن أن العديد من وقد أنشأ مطوِّرو البرامج مكتبات لجهات خارجية لتوفير تجريدات أسهل في الاستخدام.

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

السمة loading

يحمّل Chrome الصور بأولويات مختلفة بناءً على مكانها. بالنسبة إلى إطار عرض الجهاز. يتم تحميل الصور أسفل إطار العرض مع ذات أولوية أقل، ولكن يستمر جلبها أثناء تحميل الصفحة.

يمكنك استخدام السمة loading لتأجيل تحميل البيانات خارج الشاشة تمامًا. الصور:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

في ما يلي القيم المسموح بها للسمة loading:

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

العلاقة بين السمة loading وأولوية الاسترجاع

قيمة eager هي تعليمات لتحميل الصورة كالمعتاد بدون تأخير. من الحمولة أكبر إذا كانت الصورة خارج الشاشة. لا يتم تحميل الصورة بشكل أسرع من صورة أخرى لا تتضمّن سمة loading

إذا كنت تريد زيادة أولوية جلب صورة مهمة (على سبيل المثال، صورة LCP)، يمكنك استخدام أولوية الجلب مع fetchpriority="high"

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

حدود المسافة من إطار العرض

يتم تحميل جميع الصور التي يمكن عرضها على الفور بدون تمريرها بشكل طبيعي. الصور تقع أسفل إطار عرض الجهاز فقط عندما ينتقل المستخدم بالقرب منها.

إنّ استخدام طريقة "التحميل الكسول" في Chromium يحاول ضمان أنّ الصور خارج الشاشة يتم تحميلها مبكرًا بما يكفي لتنتهي من التحميل في الوقت الذي ينتقل فيه المستخدم للأعلى أو للأسفل إليها عن طريق جلبها قبل أن تصبح مرئية في إطار العرض.

يختلف حدّ المسافة وفقًا للعوامل التالية:

• نوع مورد الصور الذي يتم استرجاعه
• نوع الاتصال الفعّال

يمكنك العثور على القيم الافتراضية لأنواع الاتصال الفعالة المختلفة في مصدر Chromium. يمكنك تجربة هذه الحدود المختلفة من خلال تقييد الشبكة في "أدوات مطوري البرامج"

تحسين توفير البيانات وحدود المسافة من إطار العرض

في تموز (يوليو) 2020، أجرى Chrome تحسينات مهمة لمواءمة حدود مسافة التحميل الكسول للصورة عن إطار العرض، وذلك لتلبية توقعات المطوّرين بشكل أفضل.

في الاتصالات السريعة (4G)، تم تقليل حدود مسافة Chrome من إطار العرض من 3000px إلى 1250px وفي الاتصالات الأبطأ (شبكة الجيل الثالث أو أقل)، تم تغيير الحد من 4000px إلى 2500px. يحقق هذا التغيير شيئين:

• يعمل <img loading=lazy> بشكل أقرب إلى التجربة التي تقدّمها مكتبات التحميل الكسول في JavaScript.
• لا تزال الحدود الدنيا الجديدة لإطار العرض تعني أنّه من المحتمل أن يكون قد تم تحميل الصور في الوقت الذي ينتقل فيه المستخدم إليها.

يمكنك العثور على مقارنة بين الحدود القديمة والجديدة لحدود المسافة من إطار العرض في أحد إصداراتنا التوضيحية التي تستخدم اتصال سريع (4G) أدناه:

الحدود القديمة مقارنةً بالحدود الجديدة:

والحدود الجديدة مقارنةً بالأحجام الكسولة (LzySizes (مكتبة شائعة التحميل الكسول في JavaScript):

تحديد سمات أبعاد الصور

أثناء تحميل المتصفح لصورة، لا يمكنه على الفور معرفة موضع الصورة ما لم يتم تحديدها بشكل صريح. للسماح للمتصفّح بحجز مساحة كافية على الصفحة لعرض الصور، وتجنُّب متغيّرات التصميم المزعجة نقترح إضافة السمتَين width وheight إلى جميع علامات <img>.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

بدلاً من ذلك، يمكنك تحديد قيمها مباشرةً بنمط مضمَّن:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

تنطبق أفضل ممارسة لإعداد السمات على علامات <img> بغض النظر عن سواء كنت تحمّلها ببطء، لكنّ طريقة "التحميل الكسول" تزيد أهميتها.

يتم تنفيذ طريقة "التحميل الكسول" في Chromium بطريقة تزيد من احتمال استخدام الصور أن يتم تحميلها بمجرد ظهورها، ولكن لا يزال هناك احتمال لن يتم تحميلها في الوقت المناسب. إذا حدث ذلك، لن يتم تحديد width و تساهم ميزة "height" في صورك في زيادة تأثيرها في "متغيّرات التصميم التراكمية". في حال حذف لا يمكنك تحديد صورك فإن التحميل الكسول لها يمكنه توفير بيانات الشبكة الموارد لخطر حدوث هذه التحولات في التصميم المتزايدة.

في معظم السيناريوهات، تستمر عملية التحميل الكسول للصور إذا لم تحدد الأبعاد، ولكن هناك بعض الحالات الهامشية التي يجب أن تكون على دراية بها. بدون width وheight محددة، تكون أبعاد الصورة الافتراضية هي 0×0 بكسل. إذا كان لديك معرض الصور، فقد يقرر المتصفح وضعها جميعًا داخل إطار العرض لأن كل صورة لا تشغل مساحة ولا يتم دفع أي صورة خارج الشاشة. ضِمن في هذه الحالة، يقرر المتصفح تحميل كل شيء، ما يزيد من حجم تحميل الصفحة. ببطء.

للاطّلاع على مثال حول طريقة تعامُل loading مع الأعداد الكبيرة من الصور، يمكنك الرجوع إلى: هذا العرض التوضيحي.

ويمكنك أيضًا استخدام طريقة التحميل الكسول للصور التي حدّدتها باستخدام العنصر <picture>:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

على الرغم من أنّ المتصفّح يحدّد الصورة التي سيتم تحميلها من أي من <source>. ما عليك سوى إضافة loading إلى العنصر الاحتياطي <img>.

ظهور صور التحميل السريع دائمًا في إطار العرض الأول

بالنسبة إلى الصور التي تظهر عند تحميل المستخدم للصفحة لأول مرة، وبشكل خاص بالنسبة إلى صور سرعة عرض أكبر محتوى مرئي (LCP)، يجب استخدام الإعداد التلقائي لسرعة التحميل على المتصفّح كي تكون متاحة في الحال. لمزيد من المعلومات، اطّلِع على تأثيرات الأداء الناتج عن التحميل الكسول الزائد.

يمكنك استخدام loading=lazy فقط للصور خارج إطار العرض الأولي. المتصفح التحميل الكسول لصورة إلى أن يعرف مكان الصورة على الصفحة مما يجعلها يتم تحميلها بشكل أبطأ.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

التقليص السلس

وتتجاهل المتصفّحات التي لا تتوافق مع السمة loading هذا السمة. لا يحصل على مزايا طريقة "التحميل الكسول"، لكن بدون التأثير سلبًا في قرار تضمينه

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

هل يمكنني تحميل الصور باستخدام طريقة "التحميل الكسول" تلقائيًا في Chrome؟

في السابق، كان Chromium يحمِّل تلقائيًا أي صور مناسبة إلى تأجيله في حال كان الوضع البسيط تم تفعيلها على Chrome لنظام Android وكانت السمة loading إما غير أو تعيينها على loading="auto". ومع ذلك، تم إيقاف الوضع البسيط وloading="auto" نهائيًا ولا نخطط لتوفير التحميل الكسول تلقائيًا للصور في Chrome.

هل يمكنني تغيير مدى قرب الصورة من إطار العرض قبل تحميلها؟

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

هل يمكن لصور الخلفية في CSS استخدام السمة loading؟

لا، يمكن استخدامه فقط مع علامات <img>.

هل يمكن استخدام loading مع الصور غير المرئية مباشرةً في إطار العرض؟

يمكن أن يؤدي استخدام loading="lazy" إلى منع تحميل الصور عندما لا تكون كذلك مرئية ولكنها تقع ضمن المسافة المحسوبة. قد تكون هذه الصور خلف لوحة عرض دوّارة أو مخفية من خلال CSS لشاشة معينة. مختلفة. على سبيل المثال، لا يحمّل Chrome وSafari وFirefox صورًا باستخدام النمط display: none;، إما على عنصر الصورة أو على أحد الوالدين العنصر. مع ذلك، هناك أساليب أخرى لإخفاء الصور، مثل استخدام opacity:0. التصميم، ستظل تدفع المتصفح إلى تحميل الصورة. اختبر دائمًا التنفيذ بدقة للتأكد من أنها تعمل على النحو المنشود.

غيَّر Chrome 121 سلوك الصور ذات التمرير الأفقي، مثل لوحات العرض الدوّارة. تستخدم هذه الآن الحدود نفسها كالتمرير العمودي. وهذا يعني أنّه في حالة استخدام لوحة العرض الدوّارة، سيتم تحميل الصور قبل ظهورها في إطار العرض. يعني هذا أنّه من غير المرجح أن يلاحظ المستخدم تحميل الصورة، ولكن سيكون على حساب المزيد من التنزيلات. استخدِم العرض التوضيحي للتحميل الكسول الأفقي لمقارنة السلوك في Chrome وSafari وFirefox.

ماذا لو كنت أستخدم مكتبة أو نصًا برمجيًا تابعًا لجهة خارجية لتحميل الصور باستخدام طريقة التحميل الكسول؟

مع التوافق الكامل مع التحميل الكسول مع المتصفحات الحديثة، ربما لا تحتاج إلى مكتبة أو نص برمجي تابعَين لجهة خارجية لتحميل الصور باستخدام طريقة التحميل الكسول.

أحد أسباب مواصلة استخدام مكتبة تابعة لجهة خارجية إلى جانب loading="lazy" هو توفير رمز polyfill للمتصفّحات التي لا تدعم السمة أو المزيد من التحكّم في حالات تفعيل طريقة "التحميل الكسول"

كيف أتعامل مع المتصفّحات التي لا تتيح طريقة "التحميل الكسول"؟

يمكنك إنشاء رمز polyfill أو استخدام مكتبة تابعة لجهة خارجية من أجل التحميل الكسول للصور على موقعك الإلكتروني. يمكنك استخدام السمة loading لمعرفة ما إذا كان المتصفّح يتيح استخدام الميزة:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

على سبيل المثال، تُعدّ الأحجام الكسولة خيارًا شائعًا مكتبة التحميل الكسول في JavaScript يمكنك اكتشاف توافق loading. لتحميل الكتب الكسولة كمكتبة احتياطية فقط عندما يكون loading غير صحيح يتم ذلك على النحو التالي:

• استبدِل <img src> بـ <img data-src> لتجنُّب حِمل العجلة. المتصفحات غير المتوافقة إذا كانت السمة loading متاحة، يمكنك تبديل data-src. مقابل src.
• إذا لم يكن loading متوافقًا، يجب تحميل إجراء احتياطي من الحجم الكسول وبدء تشغيله. باستخدام الفئة lazyload للإشارة إلى الصور المطلوب تحميلها ببطء:

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

إليك عرضًا توضيحيًا لـ هذا النمط. جرِّب ذلك في متصفح قديم لرؤية الإجراء الاحتياطي عمليًا.

هل طريقة التحميل الكسول لإطارات iframe متوافقة مع المتصفّحات أيضًا؟

تم أيضًا توحيد <iframe loading=lazy>. يتيح لك ذلك التحميل الكسول لإطارات iframe باستخدام loading. . لمزيد من المعلومات، يمكنك الاطّلاع على المقالة حان وقت التحميل الكسول لإطارات iframe خارج الشاشة.

كيف تؤثر طريقة "التحميل الكسول" على مستوى المتصفّح في الإعلانات على صفحة الويب؟

جميع الإعلانات التي تظهر للمستخدم على شكل صور أو إطارات iframe باستخدام التحميل الكسول مثل أي إعلانات أخرى أو iframe.

كيف يتم التعامل مع الصور عند طباعة صفحة ويب؟

يتم تحميل جميع الصور وإطارات iframe على الفور عند طباعة الصفحة. عرض يُرجى المشكلة رقم 875403 للحصول على التفاصيل.

هل تتعرّف أداة Lighthouse على طريقة "التحميل الكسول" على مستوى المتصفّح؟

الإصدار Lighthouse 6.0 والعامل الأعلى في أساليب التحميل الكسول للصور خارج الشاشة والتي يمكن أن تستخدم حدودًا مختلفة للسماح لهم باجتياز تدقيق تأجيل الصور خارج الشاشة:

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

إنّ توافُق المتصفّح مع الصور طريقة التحميل الكسول يمكن أن يسهّل عليك بشكل كبير. لتحسين أداء صفحاتك أدائه.

هل تلاحظ أي سلوك غير معتاد عند تفعيل هذه الميزة في Chrome؟ الإبلاغ عن الخطأ