أضف رسوم متحركة للتحميل إلى موقع WordPress الخاص بك (10 خيارات مختلفة)

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

في هذا المنشور ، سننظر في ماهية الرسوم المتحركة للتحميل بالضبط ، والغرض منها ، وكيفية إضافة واحدة إلى أي موقع WordPress - بما في ذلك مواقع Divi الخاصة بك.

ما هي الرسوم المتحركة للتحميل؟

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

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

التعرف على تحميل الرسوم المتحركة

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

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

نصائح لتحسين تحميل الرسوم المتحركة

هناك بعض الأشياء التي يمكنك إضافتها إلى الرسوم المتحركة للتحميل لجعلها أكثر إثارة من مجرد صورة متحركة. فيما يلي بعض النصائح لجعلها أفضل وأكثر فعالية.

• تضمين شريط النسبة المئوية
• أظهر مقدار الوقت الذي ينتظره المستخدم
• اشرح ما يحدث تحت غطاء المحرك (دعائم لاستخدام الدعابة)
• استخدم رسوم متحركة مسلية لا تكرر بالضرورة نفس الإجراء بالضبط

فوائد تحميل الرسوم المتحركة ذات العلامات التجارية

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

كيفية إضافة الرسوم المتحركة للتحميل إلى موقع WordPress الخاص بك

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

استخدام البرنامج المساعد لإضافة الرسوم المتحركة للتحميل

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

لوفت لودر

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

محمل مسطح

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

أفضل أداة التحميل المسبق

يعد Best Preloader مكونًا إضافيًا مجانيًا لتحميل الرسوم المتحركة من خيار واحد يناسب أي نمط موقع ويب. لقد جئت مع رسم متحرك واحد مع بعض عناصر التحكم في التخصيص.

محمل الصفحة

يُعد Page Loader مكونًا إضافيًا للرسوم المتحركة للتحميل مع الكثير من خيارات التخصيص والعلامات التجارية. إنها واحدة من الإضافات المفضلة للتحميل المسبق في السوق.

WP Smart Preloader

WP Smart Preloader هو مكون إضافي مجاني ومفتوح المصدر مع خيارات تخصيص كاملة. الرسوم المتحركة ليست معقدة للغاية ولكنها تتوافق مع أي نمط من مواقع الويب. يمكنك تخصيص الألوان والإعدادات بسهولة تامة.

إضافة رسوم متحركة للتحميل بدون مكون إضافي

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

PixelBuddha مع الوسائط المتعددة:

قام الرجال في Multimedia بنشر برنامج تعليمي بسيط مع مجموعتين مجانيتين من تحميل الرسوم المتحركة من PixelBuddha والرمز الذي تحتاجه لإعدادهم على موقعك.

كود القلم:

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

SpinKit:

يمتلك Tobias Ashlink SpinKit مع مجموعة رائعة من تحميل الرسوم المتحركة مع الكود المتاح من خلال GitHub. هذه تحتاج أيضًا إلى إضافتها إلى مجموعة تعليمات برمجية كاملة لإعداد ما قبل التعطل.

Loading.io:

Loading.io عبارة عن مجموعة من تحميل الرسوم المتحركة مع الكثير من الخيارات المختلفة. هناك برامج تحميل مسبقة لـ CSS وأدوات تحميل مسبقة لـ GIF وأزرار والمزيد. ابحث في موقعهم للعثور على جميع الخيارات والإرشادات حول كيفية إضافتهم إلى موقعك.

بيكسلفارس:

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

مع العديد من الخيارات ، ما الذي ستختاره؟

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

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

صورة مميزة عبر موقع muchomoros / shutterstock.com