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

Jeremy Wagner
Rachel Andrew

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

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

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

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

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

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

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

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

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

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

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

إن أداة مراقبة التقاطع أسهل في الاستخدام والقراءة من التعليمات البرمجية التي تعتمد على العديد معالِجات الأحداث، لأنّك تحتاج فقط إلى تسجيل مراقب لمشاهدة بدلاً من كتابة التعليمات البرمجية المملة للكشف عن رؤية العنصر. الكل المتبقي للقيام به هو تحديد ما يجب فعله عندما يكون العنصر مرئيًا. لنفترض أنّ نمط الترميز الأساسي هذا لعناصر <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. إذا كان "أداة مراقبة التقاطع" متاحًا، إنشاء مراقب جديد ينفِّذ استدعاء عند دخول عناصر 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 للتحقق مما إذا كان العنصر في إطار العرض (باستخدام مراقبة التقاطع!)، وأضف الفئة 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 على التوالي. تستخدم التقاطع أداة المراقبة (يمكنك تعويضها)، ويمكن توسيعها باستخدام عدد من المكونات الإضافية إلى لتنفيذ إجراءات مثل الفيديو الكسول التحميل مزيد من المعلومات حول استخدام الحجم الكسول
  • vanilla-lazyload هو هو خيار خفيف التحميل الكسول للصور وصور الخلفية والفيديوهات وإطارات iframe والنصوص البرمجية. تستفيد هذه الأداة من أداة Intersection Observer وتدعم الصور سريعة الاستجابة تعمل على تفعيل طريقة "التحميل الكسول" على مستوى المتصفّح.
  • lozad.js هو وسيلة أخرى خفيفة الذي يستخدم "أداة مراقبة التقاطع" فقط. وبناءً على ذلك، فهي ذات أداء عالٍ، ولكن ستحتاج إلى إدخاله قبل أن تتمكن من استخدامها في المتصفحات القديمة.
  • إذا كنت بحاجة إلى مكتبة ذات تحميل كسول خاص بـ React، يمكنك react-lazyload خلال هذه الفترة لا تستخدم أداة Intersection Observer،فإنها توفّر طريقة مألوفة تحميل الصور للذين اعتادوا على تطوير التطبيقات باستخدام React.