إظهار شريط تقدم تحميل الصفحات تلقائياً

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

اليوم سأشرح لك طريقة إظهار شريط تقدم تحميل الصفحات تلقائياً بواسطة Pace.js.

ما هو Pace.js؟

Pace.js هو عبارة عن إضافة jQuery تقوم بإظهار مأشر تقدم جميل بينما يتم تحميل الموقع في المتصفح و الجميل في الأمر هو أن تفعيلها لا يتطلب معرفة متقدمة بالبرمجة.

طريقة الإستعمال.

من أجل إستعمال هذه الإضافة فقط عليك إضافة ملف Pace.js و ملف CSS الخاص بالتصميم الذي تريده (ستجده في ملف themes الخاص بالإضافة) إلى القالب المفعَّل و بعدها وضع رابط الملفّين داخل وسم head.

مثال:

في هذا المثال سنستعمل تصميم Corner Indicator.

1- نقوم بإنشاء ملف جديد داخل المجلد الرئيسي للقالب المفعَّل نسميه مثلاً pace ثم نضع داخله ملف pace.js و ملف css.
2- نقوم بوضع رابطي الملفَّين في وسم head.

1	<script src="/wp-content/themes/yourtheme/pace/pace.js"></script>

2	<link href="/wp-content/themes/yourtheme/pace/pace-theme-corner-indicator.css" rel="stylesheet" />

يجب عليك إستبدال yourtheme بإسم قالبك.

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

يمكنك معاينة النتيجة عند الإنتقال إلى مقالة أخرى أو تحديث هذه المقالة.

أنقر هنا لتحميل ملف الإضافة.

أنقر هنا لمشاهدة الديمو.

شاهد في Git Hub.