كيف يعمل التحميل البطيء؟
تبدو صورة HTML العادية كما يلي:
<img src="sample.jpg" width="100%"/>أعد كتابة الكود كما يلي:
<img data-src="sample.jpg" width="100%"/>كما لاحظت ،srcتم تغيير السمة إلىبيانات- src.
لانه لاsrc، لا يقوم المستعرض بتحميل هذه الصورة مبدئيًا. لاحقًا ، يتحقق رمز JavaScript صغيرًا مما إذا كانت الصورة موجودة في منفذ العرض (منفذ عرض المستخدم) ، وما إذا كانت في الداخل ،بيانات- srcيعود إلى ذلكsrcالمتصفح الذي يبدأ تنزيل الصورة وعرضها.
ما هو التحميل الأصلي الكسول؟
يأتي Chrome مزودًا بخاصية "التحميل البطيء الأصلي". يمكنك القراءة عنه هنا.
يتميز التحميل البطيء الأصلي بأنه لا توجد حاجة إلى JavaScript وهو أسرع بشكل عام نظرًا لأن المتصفح يقوم بذلك "محليًا".
يبدو الرمز كما يلي:
<img src="sample.jpg" loading="lazy" width="100%"/>ما هي الصور الطائرة؟
Flying Images هو مكون إضافي عالي الأداء للتحميل البطيء. إنه يستخدم التحميل البطيء "الأصلي" للمتصفح إذا كان متاحًا ، وإلا استخدم JavaScript العادي للتحميل البطيء.
يمكن أيضًا للصور الطائرة تحميل الصور قبل ظهورها في منفذ العرض.
هل أنت خائف من التحميل البطيء لأنه يضر بتجربة المستخدم؟
كيف تختلف الصور المتطايرة عن ملحقات التحميل البطيئة الأخرى؟
- يستخدم المدمج في التحميل البطيء - استخدم التحميل البطيء المدمج إذا كان متاحًا (مدعوم حاليًا فقط في Chrome) ، وإلا استخدم JavaScript لتحميل الصور كسولًا.
- تحميل الصور قبل الدخول إلى منفذ العرض - بينما تقوم المكونات الإضافية الأخرى بتحميل الصور عندما تكون "داخل" إطار العرض ، تقوم الصور المتحركة بتحميلها عندما تكون على وشك الدخول إلى إطار العرض.
- جافا سكريبت صغيرة - 0.5 كيلوبايت فقط مضغوطة ومختصرة.
- إذا رغبت في ذلك ، يمكنك استخدام أصلي فقط - هل تريد دعم Chrome فقط؟ يمكنك التبديل إلى "أصلي فقط" ، والذي لا يضخ JavaScript.
- يعيد كتابة كل كود HTML - لا تفوتك أي صورة أبدًا بسبب التحميل البطيء (حتى إذا تمت إضافتها بواسطة مكونات المعرض الإضافية).
- حشو شفاف - تمت إضافة قاعدة شفافة صغيرة جدًا لجميع الصور. لا مزيد من الوميض عند تحميل الصور.
- استبعاد الكلمات الرئيسية - توفر جميع مكونات التحميل البطيئة تقريبًا ميزة استبعاد ، ومع ذلك يمكن للصور المتحركة أيضًا استبعاد الصور من العقدة الأصلية للصورة. مفيد إذا لم يكن لصورتك اسم فئة.
- يدعم المتصفحات مع تعطيل IE و JavaScript - يتم تحميل جميع الصور على الفور إذا كان Internet Explorer أو حتى إذا تم تعطيل JavaScript تمامًا (باستخدام
noscriptبطاقة شعار).
