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

جيريمي واغنر

راشيل أندرو

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تتوفر أداة Intersection Monitorer (أداة مراقبة التقاطع) في جميع المتصفحات الحديثة. وبالتالي، سيضمن استخدام هذه الواجهة كرمز 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 Monitorer!)، وأضِف الفئة 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)

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

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

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

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

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

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

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

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