التحميل الكسول للوسائط Lazyload
استخدم نظام التحميل الكسول الموجود في ScoreTank لتأجيل تحميل الصور والفيديوهات والصوتيات وإطارات التضمين حتى تقترب من منطقة العرض، مما يساعد على تقليل التحميل الأولي للصفحة وتحسين تجربة التصفح.
قبل البدء: يأتي قالب ScoreTank مزوداً بآلية Lazyload مدمجة. لا تحتاج إلى تثبيت إضافة خارجية أو إضافة مكتبة جديدة إلى القالب. كل ما تحتاج إليه هو استخدام الصيغ الصحيحة داخل محتوى المقال من خلال وضع عرض HTML في محرر المشاركات.
أولاً: ما هو التحميل الكسول Lazyload؟
فهم وظيفة الخاصية قبل استخدامها في المقالات.
تحميل المحتوى عند الحاجة إليه
عندما تحتوي المقالة على صور كثيرة أو فيديوهات أو ملفات صوتية، قد يؤدي تحميل جميع هذه العناصر فور فتح الصفحة إلى زيادة حجم البيانات المطلوبة في البداية. تساعد خاصية Lazyload على تأجيل تحميل العناصر التي لم يصل إليها الزائر بعد، بدلاً من تحميلها كلها في اللحظة الأولى.
lazyload، ويستخدم آلية مراقبة ظهور العناصر
في نطاق العرض. وعندما يقترب العنصر من منطقة العرض،
ينقل القالب خصائص التحميل المؤجلة إلى خصائصها الفعلية،
ثم يسمح بتحميل الوسيط.
الطريقة العادية
استخدام src أو srcset
مباشرة يجعل المتصفح يتعامل مع رابط المورد فور قراءة العنصر،
وفق سلوك التحميل المعتاد.
طريقة ScoreTank
استخدام data-src أو
data-srcset مع
class="lazyload"
يتيح للقالب تأجيل نقل الرابط إلى الخاصية الفعلية.
ثانياً: طريقة إضافة أكواد Lazyload داخل المقال
استخدم محرر HTML حتى تظل خصائص البيانات كما هي.
افتح المقال الذي تريد تعديله
من لوحة تحكم بلوجر انتقل إلى المشاركات، ثم افتح المقال الذي تريد إضافة صورة أو فيديو أو ملف صوتي إليه.
انتقل إلى عرض HTML
من محرر المشاركات افتح قائمة وضع التحرير، واختر عرض HTML بدلاً من عرض الكتابة.
اختر الكود المناسب للوسيط
استخدم كود Iframe لفيديو YouTube أو الخرائط، وكود Picture للصور المتجاوبة، وكود Audio للصوت، وكود Video لمقاطع الفيديو المباشرة.
استبدل الروابط الوهمية بروابطك
غيّر معرف الفيديو أو روابط الصور والصوت والفيديو وفق التعليمات الموجودة أسفل كل كود.
احفظ المقال واختبره
احفظ التعديل، ثم افتح المقال المنشور وتأكد من تحميل الوسائط عند الاقتراب منها ومن عمل مشغلات الصوت والفيديو بالشكل الصحيح.
data-src أو data-srcset
أو إزالة بعض الوسوم أثناء التنسيق.
ثالثاً: إطارات Iframe
تضمين فيديوهات YouTube والخرائط والخدمات الخارجية.
استخدام Iframe مع التحميل المؤجل
يمكنك استخدام هذه الطريقة عند إضافة فيديو YouTube أو إطار
من خدمة خارجية تدعم التضمين. بدلاً من وضع رابط الإطار
في src مباشرة، نضعه داخل
data-src، ونضيف الكلاس
lazyload حتى يتعرف عليه القالب.
Uz970DggW7E
في موضعين داخل الكود:
الأول في رابط الصورة المصغرة،
والثاني في رابط الفيديو نفسه.
استخدم معرف الفيديو الحقيقي الخاص بك في الموضعين.
<iframe class="lazyload" title="Youtube"
width="400" height="300" allowfullscreen
allow="accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture"
data-style="background: url(https://img.youtube.com/vi/Uz970DggW7E/hqdefault.jpg) 50% 50% / cover no-repeat;"
data-src="https://www.youtube.com/embed/Uz970DggW7E"></iframe>شرح خصائص الكود
class="lazyload":
الكلاس الذي يتعرف عليه نظام Lazyload في القالب.
data-src:
رابط الفيديو الذي يتم نقله إلى الخاصية الفعلية عند تحميل العنصر.
data-style:
تنسيق الصورة المصغرة التي تظهر كخلفية قبل تحميل الإطار.
width وheight:
أبعاد إطار الفيديو، ويمكنك تعديلها حسب مساحة العرض.
title:
وصف مختصر للإطار يساعد على تعريف محتواه.
https://www.youtube.com/embed/
وليس رابط صفحة مشاهدة الفيديو العادي.
رابعاً: الصور المتجاوبة Picture
تقديم أحجام مختلفة من الصور وفق عرض شاشة الزائر.
لماذا نستخدم Picture؟
يتيح عنصر picture تحديد أكثر من مصدر للصورة،
بحيث يختار المتصفح المصدر المناسب وفق شروط العرض الموجودة في
خاصية media. ويستخدم القالب خصائص
data-srcset وdata-src
لتأجيل تحميل مصادر الصور.
https://picsum.photos/
بروابط الصور الحقيقية التي تريد عرضها على موقعك.
ستحتاج إلى تغيير روابط المصادر الثلاثة.
<picture class="lazyload">
<source media="(min-width:800px)" data-srcset="https://picsum.photos/800/1200">
<source media="(min-width:600px)" data-srcset="https://picsum.photos/600/900">
<img data-src="https://picsum.photos/200/300" alt="Photo" style="width:auto;">
</picture>كيف يختار المتصفح الصورة؟
إذا كان عرض الشاشة 800 بكسل أو أكثر، يمكن استخدام المصدر الأول.
وإذا كان العرض 600 بكسل أو أكثر، يمكن استخدام المصدر الثاني.
وفي الحالات الأخرى يستخدم المتصفح صورة عنصر
img كالمصدر الأساسي.
Photo كما هي. يساعد ذلك على توضيح محتوى الصورة
للأدوات المساعدة ومحركات البحث.
خامساً: الملفات الصوتية Audio
إضافة مشغل صوتيات داخل محتوى المقال.
استخدام مشغل الصوت
إذا أردت إضافة ملف صوتي إلى المقال،
يمكنك استخدام عنصر audio مع الخاصية
controls لعرض أزرار التشغيل والتحكم.
وتوضع روابط الملفات داخل data-src
حتى يتولى القالب تحميلها عند اقتراب المشغل من نطاق العرض.
sound.ogg و
sound.mp3 بالروابط المباشرة لملفات الصوت الخاصة بك.
ترك الرابطين بصيغتين مختلفتين يتيح للمتصفح اختيار المصدر
الذي يدعمه.
<audio class="lazyload" controls>
<source data-src="sound.ogg" type="audio/ogg">
<source data-src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>ماذا تفعل الخصائص؟
controls:
تعرض أدوات التحكم في تشغيل الصوت وإيقافه.
data-src:
يحتوي رابط الملف الصوتي المؤجل.
type:
يوضح نوع الملف الصوتي للمتصفح، مثل
audio/ogg أو audio/mpeg.
سادساً: مقاطع الفيديو المباشرة Video
إضافة فيديو مستضاف على رابط مباشر، وليس فيديو YouTube.
عرض ملف فيديو داخل المقال
يستخدم هذا المثال عنصر video لعرض مشغل فيديو
داخل المقال. ويمكن توفير أكثر من صيغة للملف حتى يتمكن المتصفح
من اختيار الصيغة التي يدعمها.
movie.mp4 ورابط
movie.ogg بالروابط المباشرة لملفات الفيديو الخاصة بك.
ويمكنك تعديل العرض والارتفاع من خلال خصائص
width وheight.
<video class="lazyload" width="320" height="240" controls>
<source data-src="movie.mp4" type="video/mp4">
<source data-src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>شرح أهم الخصائص
width:
عرض مشغل الفيديو.
height:
ارتفاع مشغل الفيديو.
controls:
إظهار أزرار التحكم والتشغيل.
data-src:
رابط ملف الفيديو الذي سيتم تحميله لاحقاً.
type:
نوع صيغة الفيديو، مثل
video/mp4 أو video/ogg.
video.
سابعاً: فهم الكلاس والخصائص المستخدمة
الجزء البرمجي المشترك بين جميع أكواد Lazyload.
class="lazyload"
الكلاس الذي يتعرف عليه القالب لتحديد العنصر الذي ينبغي مراقبته وتأجيل تحميل محتواه.
data-src
يخزن رابط المورد بدلاً من وضعه مباشرة في
src، ثم ينقله القالب عند تحميل العنصر.
data-srcset
يخزن مصادر الصور المتعددة بدلاً من استخدام
srcset مباشرة.
data-style
يخزن تنسيق العنصر مؤقتاً، ويستخدمه مثال Iframe لعرض الصورة المصغرة قبل تحميل الفيديو.
data-src بـ src
ولا تستبدل data-srcset بـ srcset
في أمثلة التحميل المؤجل؛ لأن ذلك يغيّر طريقة تعامل القالب مع المورد.
لماذا لا نضيف مكتبة JavaScript جديدة؟
يحتوي ملف ScoreTank بالفعل على نظام مراقبة للعناصر
التي تحمل الكلاس lazyload،
ويقوم بمعالجة خصائص البيانات المؤجلة عند اقتراب العنصر
من نطاق العرض. لذلك لا تحتاج إلى إضافة سكربت Lazyload آخر
أو تعديل ملف XML لتنفيذ الأمثلة الموجودة في هذا الدليل.
