طريقة التحميل الكسول للصور

Jeremy Wagner

Rachel Andrew

يمكن أن تظهر الصور على صفحة ويب لأنّها مضمّنة في HTML كعناصر <img> أو كصور خلفية CSS. وستتعرّف في هذه المشاركة على طريقة التحميل الكسول لكلا النوعَين من الصور.

الصور المضمّنة

إنّ الصور المحفّزة للتحميل الكسول الأكثر شيوعًا هي الصور المستخدَمة في عناصر <img>. بالنسبة إلى الصور المضمّنة، لدينا ثلاثة خيارات للتحميل الكسول يمكن استخدامها معًا لتحقيق أفضل توافق بين المتصفحات:

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

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

يتيح كل من Chrome وFirefox استخدام طريقة "التحميل الكسول" مع السمة loading. يمكن إضافة هذه السمة إلى عناصر <img> وأيضًا إلى عناصر <iframe>. تطلب قيمة lazy من المتصفّح تحميل الصورة فورًا إذا كانت في إطار العرض، وجلب صور أخرى عند انتقال المستخدم إلى المحتوى بالقرب منها.

ملاحظة: يُرجى العلم أنّ <iframe loading="lazy"> غير عادي حاليًا. وأثناء تنفيذ هذه السياسة في Chromium، لا تتوفّر لها أي مواصفات بعد، وتخضع للتغيير في المستقبل في حال حدوث ذلك. ونقترح عدم التحميل الكسول لإطارات iframe باستخدام السمة loading حتى تصبح جزءًا من المواصفات.

راجِع حقل loading ضمن جدول توافق المتصفّح في MDN للحصول على تفاصيل عن إتاحة المتصفِّح. إذا كان المتصفّح لا يتيح طريقة "التحميل الكسول"، سيتم تجاهل السمة وسيتم تحميل الصور على الفور كالمعتاد.

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

لمزيد من المعلومات، اطّلِع على مقالة التحميل الكسول على مستوى المتصفّح للويب.

استخدام "مراقبة التقاطع"

ولتعويض التحميل الكسول لعناصر <img>، نستخدم JavaScript للتحقّق مما إذا كانت مضمَّنة في إطار العرض. وفي هذه الحالة، تتم تعبئة سمات src (وأحيانًا srcset) بعناوين URL تؤدي إلى محتوى الصورة المطلوب.

إذا سبق لك كتابة رموز برمجية تستخدم "التحميل الكسول"، قد تكون أكملت مهمتك باستخدام معالِجات الأحداث مثل scroll أو resize. وعلى الرغم من أنّ هذا الأسلوب هو الأكثر توافقًا بين المتصفحات، إلا أنّ المتصفِّحات الحديثة توفّر طريقة أكثر فعالية وطريقةً للتحقّق من مستوى رؤية العناصر عبر Intersection Observer API.

إن أداة Intersection Observer أسهل في الاستخدام والقراءة من الرموز البرمجية التي تعتمد على معالِجات أحداث مختلفة، لأنّك تحتاج فقط إلى تسجيل مراقب لمشاهدة العناصر بدلاً من كتابة كود ممل لرصد مستوى رؤية العنصر. كل ما تبقى فعله هو تحديد ما يجب فعله عندما يكون أحد العناصر مرئيًا. لنفترض أنّ نمط الترميز الأساسي هذا لعناصر <img> التي تم تحميلها بطريقة كسولة:

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">

هناك ثلاث نقاط ذات صلة بهذا الترميز عليك التركيز عليها:

1. السمة class، وهي العنصر الذي ستختار العنصر باستخدامه في JavaScript.
2. السمة src التي تشير إلى صورة عنصر نائب ستظهر عند تحميل الصفحة لأول مرة.
3. السمتان data-src وdata-srcset، وهما سمتا عناصر نائبة تحتويان على عنوان URL للصورة التي ستحمّلها بمجرد دخول العنصر في إطار العرض.

والآن، لنتعرّف على طريقة استخدام Intersection Observer في JavaScript لتحميل الصور باستخدام نمط الترميز التالي:

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});

في حدث DOMContentLoaded للمستند، يطلب هذا النص البرمجي في DOM جميع عناصر <img> مع فئة lazy. إذا كان Intersection Observer متاحًا، يمكنك إنشاء مراقب جديد يشغِّل استدعاء عند دخول عناصر img.lazy إلى إطار العرض.

تتوفر أداة Intersection Observer في جميع المتصفحات الحديثة. وبالتالي، فإن استخدامه كرمز polyfill لـ loading="lazy" سيضمن إتاحة التحميل الكسول لمعظم الزوّار.

الصور في CSS

على الرغم من أنّ علامات <img> هي الطريقة الأكثر شيوعًا لاستخدام الصور على صفحات الويب، يمكن أيضًا استدعاء الصور عبر سمة CSS background-image (والسمات الأخرى). لا ينطبق التحميل الكسول على مستوى المتصفّح على صور خلفية CSS، لذا يجب استخدام طرق أخرى إذا كانت لديك صور خلفية تريد تحميلها ببطء.

على عكس عناصر <img> التي يتم تحميلها بغض النظر عن مستوى رؤيتها، يتم إجراء تحميل الصور في CSS مع مزيد من التوقُّع. عندما يتم إنشاء نماذج كائن المستند وCSS وشجرة العرض، يفحص المتصفح كيفية تطبيق CSS على المستند قبل طلب موارد خارجية. إذا حدَّد المتصفّح قاعدة CSS تتضمّن موردًا خارجيًا، لن يتم تطبيقها على المستند لأنّه تم إنشاؤه حاليًا، لن يطلب المتصفّح ذلك.

ويمكن استخدام هذا السلوك التوقُّعي لتأجيل تحميل الصور في CSS عن طريق استخدام JavaScript لتحديد متى يكون العنصر ضمن إطار العرض، وبالتالي تطبيق فئة على هذا العنصر تطبّق النمط الذي يستدعي صورة خلفية. يؤدي ذلك إلى تنزيل الصورة عند الحاجة بدلاً من تنزيلها عند التحميل الأوّلي. على سبيل المثال، لنأخذ عنصرًا يحتوي على صورة خلفية كبيرة:

<div class="lazy-background">
  <h1>Here's a hero heading to get your attention!</h1>
  <p>Here's hero copy to convince you to buy a thing!</p>
  <a href="/buy-a-thing">Buy a thing!</a>
</div>

ويحتوي العنصر div.lazy-background عادةً على صورة خلفية الجزء الرئيسي التي استدعتها بعض CSS. في هذا المثال عن طريقة "التحميل الكسول"، يمكنك عزل السمة background-image الخاصة بالعنصر div.lazy-background من خلال الفئة visible التي تتم إضافتها إلى العنصر عندما يكون في إطار العرض:

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
}

من هنا، يمكنك استخدام JavaScript للتأكّد مما إذا كان العنصر مُدرجًا في إطار العرض (باستخدام Intersection Observer! )، وإضافة الفئة visible إلى العنصر div.lazy-background في ذلك الوقت، ما يؤدي إلى تحميل الصورة:

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

التأثيرات على سرعة عرض أكبر محتوى مرئي (LCP)

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

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

عند استخدام برامج التحميل الكسولة المستندة إلى JavaScript، ننصحك بتجنُّب التحميل الكسول للصور ضمن إطار العرض، لأنّ هذه الحلول تستخدم غالبًا السمة data-src أو data-srcset كعنصر نائب للسمتَين src وsrcset. تكمن المشكلة هنا في تأخّر تحميل هذه الصور بسبب تعذُّر العثور عليها أثناء بدء التشغيل من خلال الماسح الضوئي لتحميل التطبيقات في المتصفّح.

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

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

مكتبات التحميل الكسول

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

• lazysizes هي مكتبة تحميل كسول كامل الميزات تعمل على التحميل الكسول للصور وإطارات iframe. ويشبه النمط المستخدَم إلى حد كبير أمثلة الرموز الموضّحة هنا في أنّه يرتبط تلقائيًا بفئة lazyload على عناصر <img>، ويتطلّب منك تحديد عناوين URL للصور في السمتَين data-src و/أو data-srcset كي يتمّ تبديل محتوىهما في السمتَين src و/أو srcset على التوالي. فهو يستخدم Intersection Observer (التي يمكنك ملؤها)، ويمكن توسيعها باستخدام عدد من المكوّنات الإضافية لتنفيذ إجراءات مثل تحميل الفيديو الكسول. مزيد من المعلومات حول استخدام الحجم الكسول
• ويُعدّ vanilla-lazyload خيارًا خفيفًا للصور التي يتم تحميلها ببطء، وصور الخلفية، والفيديوهات، وإطارات iframe، ونصوص النصوص البرمجية. وتستفيد هذه الأداة من أداة Intersection Observer وتتوافق مع الصور سريعة الاستجابة وتفعِّل التحميل الكسول على مستوى المتصفّح.
• lozad.js هو خيار خفيف آخر يستخدم مراقبة التقاطع فقط. وبالتالي، فهي ذات أداء عالٍ، ولكن يجب تعبئتها قبل أن تتمكن من استخدامها في المتصفحات القديمة.
• إذا كنت بحاجة إلى مكتبة ذات تحميل كسول خاص بـ React، ننصحك باستخدام react-lazyload. وعلى الرغم من أنّ الأداة لا تستخدم أداة Intersection Observer، فإنّها توفِّر طريقة مألوفة للتحميل الكسول للصور للمستخدمين الذين اعتادوا تطوير التطبيقات باستخدام React.