أفضل الطرق لتخصيص التحميل الكسول الخاص بك لمواقع الويب

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

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

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

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

خاصية العلامة <img>:

دبوس

عند استخدام علامة <img> ، يستخدم المتصفح السمة src لتشغيل تحميل الصورة. لا يهم إذا كانت الصورة الأولى أو رقم 100 في شفرتك. إذا تلقى المستعرض سمة src ، فسيؤدي ذلك إلى تحميل الصورة. لذلك ، لتحميل هذه الصور ، أضف عنوان URL للصورة إلى سمة أخرى غير src. على سبيل المثال ، إذا قمت بوضع عنوان URL للصورة في سمة data-src ، فلن يقوم المتصفح بتشغيل تحميل الصورة لأن سمة src فارغة.

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

1. استخدام أحداث JavaScript:

دبوس

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

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

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

في حالة التمرير ، يتم تشغيل حدث التمرير باستمرار. لذلك لزيادة الأداء ، يمكننا إضافة مهلة صغيرة من شأنها أن تخنق تنفيذ التحميل البطيء.

2. استخدام واجهة برمجة تطبيقات مراقب التقاطع:

دبوس

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

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

تعمل واجهة برمجة تطبيقات Intersection Observer بسرعة دون جعل الموقع يبدو بطيئًا عند التمرير مقارنة باستخدام أحداث JavaScript. باستخدام تقنية مستمع الحدث ، كان علينا إضافة مهلة تضيف تأخيرًا بسيطًا. ومع ذلك ، لا تدعم جميع المتصفحات واجهة Interersection Observer API. وبالتالي ، أصبح مستمع الأحداث خيارًا شائعًا للمستخدمين.

خاصية خلفية CSS:

دبوس

لتحميل صور خلفية CSS ، يجب على المستعرض إنشاء نموذج كائن CSS (CSSOM) جنبًا إلى جنب مع نموذج كائن المستند (DOM) لتحديد ما إذا كان نمط CSS سينطبق على DOM الموجود في المستند الحالي. إذا كانت قاعدة CSS لا تنطبق على العنصر ، فلن يقوم المتصفح بتحميل صورة الخلفية.

باستخدام هذه التقنية ، نطبق خاصية background-image CSS عندما يأتي عنصر إلى منفذ العرض. يوجد عنصر بالمعرف bg-image (صورة الخلفية) في CSS. بمجرد إضافة الفئة lazy إلى الصورة ، في تقنية CSS ، نتجاوز خاصية bg-image ونجعلها لا شيء.

يُفضل إضافة فئة .lazy إلى # bg-image في CSS بدلاً من استخدام # bg-image بمفردها. في البداية ، يطبق المتصفح صورة الخلفية: لا شيء على العنصر. بمجرد التمرير عبر صفحة الويب ، يكتشف مستمعوا الأحداث أو مراقب التقاطع الصورة الموجودة في منفذ العرض ويحذف فئة .lazy. هذا غير قابل للتطبيق في تقنية CSS حيث يتم تطبيق خاصية bg-image على العنصر الذي يقوم بتشغيل تحميل صورة الخلفية.

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