أفضل ممارسات التحميل الكسول

Jeremy Wagner

Rachel Andrew

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

التركيز على التفاصيل

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

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

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

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

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  // lazy-loading image code goes here
}, {
  rootMargin: "0px 0px 256px 0px"
});

إذا كانت قيمة rootMargin تبدو مشابهة للقيم التي تحدّدها لخدمة CSS margin، وهذا لأنها موجودة! في هذه الحالة، الهامش السفلي من العنصر المرصود (إطار عرض المتصفح بشكل تلقائي، ويمكن تغيير ذلك إلى عنصر محدد باستخدام السمة root) يتم توسيعه بمقدار 256 البكسل. وهذا يعني أنه سيتم تنفيذ دالة الاستدعاء عندما يكون أحد عناصر الصورة في نطاق 256 بكسل من إطار العرض وسيبدأ تحميل الصورة قبل أن يراها المستخدم بالفعل.

لتحقيق هذا التأثير نفسه في المتصفحات التي لا تتوافق مع مراقبة التقاطع، استخدم رمز معالجة أحداث التمرير واضبط تحقق getBoundingClientRect من وجود مخزن مؤقت.

متغيّرات التصميم والعناصر النائبة

يمكن أن تؤدي وسائط التحميل الكسول إلى تغيُّر التنسيق في حال عدم استخدام العناصر النائبة. قد تكون هذه التغييرات مربكة للمستخدمين وتؤدي إلى عرض تنسيق DOM باهظ الثمن. العمليات التي تستهلك موارد النظام وتسهم في التعطل. على الأقل، ضع في اعتبارك استخدام عنصر نائب بلون واحد مصمت ويشغل نفس أبعاد أو الصورة المستهدفة، أو تقنيات مثل LQIP أو SQIP الذي يشير إلى محتوى الوسائط العنصر قبل تحميله.

بالنسبة إلى علامات <img>، يجب أن يشير src في البداية إلى عنصر نائب إلى أن يتم ذلك باستخدام عنوان URL النهائي للصورة. استخدِم السمة poster في العنصر <video> للإشارة إلى صورة عنصر نائب. بالإضافة إلى ذلك، يمكنك استخدام width height على كل من العلامتين <img> و<video>. يضمن ذلك أن لن يؤدي الانتقال من العناصر النائبة إلى الصور النهائية إلى تغيير الحجم المعروض. العنصر أثناء تحميل الوسائط.

تأخير في فك ترميز الصور

قد يؤدي تحميل صور كبيرة في JavaScript وإفلاتها في نموذج العناصر في المستند (DOM) إلى الارتباط سلسلة التعليمات الرئيسية، مما يتسبب في عدم استجابة واجهة المستخدم لمدة قصيرة من الوقت أثناء حدوث فك التشفير. فك ترميز الصور بشكل غير متزامن باستخدام decode طريقة الدفع قبل إدراجها في DOM، إلى تقليل هذا النوع من البيانات غير المحتملة، يُرجى الانتباه: هذه الميزة ليست متاحة في كل المواقع بعد، وتضيف بعض التعقيدات إلى منطق التحميل الكسول. إذا كنت تريد استخدامه، يجب البحث عنه. البرامج أدناه كيف يمكنك استخدام Image.decode() مع إجراء احتياطي:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

if ("decode" in newImage) {
  // Fancy decoding logic
  newImage.decode().then(function() {
    imageContainer.appendChild(newImage);
  });
} else {
  // Regular image load
  imageContainer.appendChild(newImage);
}

راجع رابط CodePen هذا لمعرفة التعليمات البرمجية المشابهة لهذا المثال في العمل. إذا كانت معظم صورك صغيرة إلى حدٍ ما، قد لا يفيدك ذلك كثيرًا، غير أنّه قد يساعد بالتأكيد في الحدّ من المشاكل غير المرغوب فيها طريقة التحميل الكسول للصور الكبيرة وإدخالها في نموذج العناصر في المستند (DOM)

عند عدم تحميل العناصر

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

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

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

newImage.onerror = function(){
  // Decide what to do on error
};
newImage.onload = function(){
  // Load the image
};

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

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

مدى توفّر JavaScript

ولا يجب افتراض أن لغة JavaScript متاحة دائمًا. إذا كنت تنوي بالنسبة إلى الصور ذات التحميل الكسول، ننصحك بتوفير ترميز <noscript> الذي سيعرض الصور حالة JavaScript غير متوفرة. يتضمن أبسط مثال احتياطي ممكن استخدام عناصر <noscript> لعرض الصور في حال إيقاف JavaScript:

في حال إيقاف JavaScript، ستظهر للمستخدمين كل من صورة العنصر النائب صورة تحتوي على عناصر <noscript>. للتجوّل في هذا المكان، ضع فئة no-js في العلامة <html> على النحو التالي:

<html class="no-js">

بعد ذلك، ضَع سطرًا واحدًا من النص البرمجي المضمّن في <head> قبل أي أوراق أنماط. عن طريق علامات <link> التي تزيل الفئة no-js من <html> إذا كانت JavaScript مفعّلة:

<script>document.documentElement.classList.remove("no-js");</script>

أخيرًا، يمكنك استخدام بعض CSS لإخفاء العناصر بفئة الكسول عندما JavaScript غير متاح:

.no-js .lazy {
  display: none;
}

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