نحن نصنع أداة تحميل مسبقة كاملة لـ JS لتطبيق AJAX. أداة التحميل المسبق مع نسبة التحميل ما هو أداة التحميل المسبق

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

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

ما هو التحميل المسبق؟

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

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

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

بعد مقدمة قصيرة، دعونا نعود إلى "الكباش". لنقم بتثبيت البرنامج المساعد وتكوينه.

البرنامج المساعد Preloader والمراجعة والتكوين

إن المكوّن الإضافي الأكثر ملائمة ومجانيًا لبرنامج التحميل المسبق الذي وجدته هو مكون إضافي يحمل اسمًا فريدًا - Preloader. هذا كل شيء، لا مفاجآت. الحقيقة هي أنه عندما تبحث عن مكون إضافي في مكتبة wordpress.org، فلن تجده. تحتاج إلى كتابة أداة التحميل المسبق في شريط البحث. يمكنك معرفة كيفية تثبيت البرنامج المساعد. تبدو هكذا:

بعد التثبيت، انتقل إلى علامة التبويب Plugins/Preloader، ومن هذه القائمة الصغيرة تبدأ الإعدادات.

لذا، جميع الإعدادات موجودة في قائمة قصيرة:

• السطر الأول من الإعداد هو لون خلفية أداة التحميل المسبق؛ افتراضيًا يكون اللون الأبيض (#FFFFFF). يمكنك ضبط المعلمة التي تهتم بها.
• ثانيا، هذا هو موقع الرسوم المتحركة GIF، ويمكن تغييره إلى أي واحد، ما عليك سوى مراعاة حجم 128 × 128 بكسل. باستخدام الرابط الموجود في الإعدادات، يمكنك تنزيل الرسوم المتحركة التي تهمك.
• الخطوة التالية هي تحديد الدلائل التي سيتم تحميل أداة التحميل المسبق فيها. يمكنك تثبيت برنامج التنزيل على الفئات، على الموقع بأكمله، بشكل منفصل على صفحات العلامات، أو على الصفحة الرئيسية فقط، الأمر متروك لك.
• آخر شيء عليك القيام به هو فتح ملف header.php في مجلد السمات النشط الخاص بك وإضافة div() المقترح مباشرةً بعد علامة الفتح.
• إذا كان المكون الإضافي نشطًا، فيمكنك بالفعل التحقق من أن المكون الإضافي يعمل.

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

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

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

يبدو الأمر كالتالي، كلما استغرق تحميل الصفحة وقتًا أطول، ظهرت شاشة البداية لفترة أطول:

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

#p_prldr (الموضع: ثابت؛ يسار: 0؛ أعلى: 0؛ يمين: 0؛ أسفل: 0؛ الخلفية: #9A12B3؛ فهرس z: 30؛).contpre صغير (حجم الخط: 25px؛) .contpre ( العرض : 250 بكسل؛ الارتفاع: 100 بكسل؛ الموضع: مطلق؛ اليسار: 50%؛ الأعلى: 48%؛ الهامش الأيسر: -125 بكسل؛ الهامش العلوي: -75 بكسل؛ اللون: #fff؛ حجم الخط: 40 بكسل؛ تباعد الأحرف: -2px؛ محاذاة النص: المركز؛ ارتفاع الخط: 35 بكسل؛) #p_prldr .svg_anm ( الموضع: مطلق؛ العرض: 41 بكسل؛ الارتفاع: 41 بكسل؛ الخلفية: url(images/oval.svg) مركز المركز بدون تكرار؛ الخلفية -الحجم: 41 بكسل؛ الهامش: -16 بكسل 0 0 -16 بكسل؛)

الكتلة التي تحتوي على فئة svg_anm هي الرسوم المتحركة الخاصة بنا. في برنامج التحميل المسبق الخاص بي، أستخدم رسومات SVG للرسوم المتحركة. يمكن تحجيمها إلى الحجم الذي أحتاجه وتبدو واقعية ورائعة. إذا كنت تريد، يمكنك استخدام بعض الرسوم المتحركة جيفأو مجرد صورة ثابتة، كل هذا يتوقف على خيالك. لدي هذا الملف oval.svg، وقمت بتعيين حجمه باستخدام المعلمة الخلفية size:41px; ، تحتاج أيضًا إلى تحديد عرض الكتلة وارتفاعها بما يعادل حجم الرسوم المتحركة. العرض: 41 بكسل؛ الارتفاع: 41 بكسل؛

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

حسنًا، الرسوم المتحركة نفسها.

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

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

بعد ذلك، نقوم بإدخال البرنامج النصي نفسه.

$(window).on("load", function () ( var $preloader = $("#p_prldr"), $svg_anm = $preloader.find(".svg_anm"); $svg_anm.fadeOut(); $preloader .delay(500).fadeOut("slow"); ));

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

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

هذا كل شيء، شكرا لاهتمامكم. 🙂

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

كيفية عمل التحميل المسبق لموقع على شبكة الإنترنت؟

يمكن إجراء أداة التحميل المسبق نفسها في بضع ثوانٍ فقط إذا كنت تستخدمها حلول جاهزةأو في بضع دقائق، إذا كتبت كل شيء بنفسك من الصفر :)

لكن لنأخذ الأمور في نصابها الصحيح..

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

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

رسم تخطيطي موجز لكيفية عمل أداة التحميل المسبق:

• حرفيًا، مباشرة بعد علامة فتح النص، نضع div باستخدام أداة التحميل المسبق؛
• تمكين أداة التحميل المسبق وإخفاء كافة محتويات الصفحة؛
• بعد تحميل الصفحة، قم بإزالة أداة التحميل المسبق واعرض الموقع.

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

AreaForLoader ( الخلفية: تدرج خطي (90deg, #FF4E50 10%, #F9D423 90%)); تجاوز السعة: مخفي; الموضع: ثابت; يسار: 0; أعلى: 0; يمين:0; أسفل:0; مؤشر z: 9999 ;)

آخر شيء عليك فعله هو إخفاء أداة التحميل المسبق. للقيام بذلك، يمكنك استخدام كود jQuery التالي:

$(window).on("load", function () ( $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader. تأخير(350).fadeOut("slow"); ));

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

إنشاء أداة التحميل المسبق باستخدام المكونات الإضافية

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

تم وصف هذين الأمرين بشكل مثالي في الفيديو التعليمي حول إنشاء أداة تحميل مسبق، لذا أنصحك بمشاهدة هذا الفيديو التعليمي:

أداة التحميل المسبق $(document).ready(function () ( NProgress.start (); NProgress.set (0.4); setTimeout(function () ( NProgress.done (); ), 4000); )); #hellopreloader>p(display:none;)#hellopreloader_preload(display: block;position: ثابت;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px ;الخلفية: #E4F1FE url(http://hello-site.ru//main/images/preloads/circles.svg) مركز المركز بدون تكرار؛ حجم الخلفية: 131px؛)

مرحبا-Site.ru. منشئ موقع مجاني.

var hellopreloader = document.getElementById("hellopreloader_preload");function FadeOutnojquery(el)(el.style.opacity = 1;var interhellopreloader = setInterval(function())(el.style.opacity = el.style.opacity - 0.05; إذا (el.style.opacity