كيف تضيف إلى قالبك تأثير تحميل ؟

ما هو تأثير التحميل الذي يضاف لكامل القالب ؟

هو تأثير يقوم بتغطية كامل القالب لحين تمام تحميل الأدوات الموجودة فيه

ما فائدته ؟

يجعل الزائر لديك تجنب لا يرى أى قفزات في تحميل القالب أثناء تحميل أكواده واتخاذ شكله الكامل

ما عيوبه ؟

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

هل يثقل القالب ؟

لا فهو يعتبر مجرد كود CSS بسيط فلا تأثير له على القالب

هل يصلح لكل القوالب ؟

لو قالبك مضاف له مكتبة Jquery فيصلح له

لو قالبك ليس مضاف له فلا يوجد معنى أن تضيف مكتبة كاملة قالبك لا يعمل بها لمجرد انك تريد تأثير CSS لهذا لا داعي منه إن لم يكن المكتبة فعلياً ضمن برمجيات قالبك والعادة إن معظم القوالب بالفعل تحتوي المكتبة

كذلك لو قالبك لا يوجد به أكواد فعلياً تأخذ وقت تحميل كسلايدرات أو قوائم لا داعي منه

أو لو هناك تأثير بالفعل في قالبك على الادوات نفسها هو مضاف بطريقة مختلفة فلا داعي لذلك أيضاً

كيف يمكنني إضافته ؟

ابحث عن وسم الفتح <body> في قالبك هو موجود في كل قالب لكن أحيانا يكون به class مثلاً هكذا

لكنك فهمت فكرة ايجاده بالجزء الأول منه

بعده مباشرة تضيف الكود التالي

<b:if cond='not data:view.isPreview and not data:view.isLayoutMode'>
<style>
#Waiting{background:#1387ED;display:flex;justify-content:center;align-items:center;color:#fff;position:fixed;height:100%;width:100%;z-index:99999;top:0;left:0;}

.loader {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}

@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

</style>

<div id='Waiting'>
<span class='loader'/>
</div>

<script type='text/javascript'>
//<![CDATA[
$(window).on("load",function(){$("#Waiting").show().fadeOut()});
//]]>
</script>
</b:if>

تعديلات الكود

*المعلم بالأزرق هو لون الخلفية استخدم لون مناسب لقالبك

*بالأحمر هو شكل التأثير يمكنك استخدام الشكل المضاف فعلياً , وان أردت أشكال أخرى يمكنك اختيار شكل من تلك المكتبة

https://cssloaders.github.io

اضغط فقط على الشكل سيفتح لك صندوق الكود انسخ الجزء الخاص بـ CSS فقط واستبدله مع الكود الأحمر

*السطر المعلم باللون الوردي

هناك إصدارات من الـ Jquery لن يعمل معها ان لم يعمل معك استبدله بهذا

jQuery(window).load(function(){jQuery('#Waiting').fadeOut();});

ان لم يعمل بعد كل هذا معناه فقط أنه غير مناسب لقالبك

ملاحظة أخيرة هامة

لو الوسم <body> عندك بعده مباشرة أكواد بها هذا الجزء <b:class

تجاوزهم وأضف الكود بعدهم وليس قبلهم

تعديل

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

صحراوي منير25 مايو 2023 في 9:11 م
الله يحفظك ويبارك فيك ويطول في عمرك
الله يرزقك من حيث لا تحتسب
شكرا جزيلا وكثيرا على كل ما تقوم به هنا
تحية لك من محبك صحراوي منير الجزائر ♥
ردحذف
الردود
ahmed hegazy26 مايو 2023 في 3:14 م
شكرا على الشرح
ردحذف
الردود
صحراوي منير11 يوليو 2023 في 3:17 م
هذا الدرس متجاوب تماما مع قالب " سهل الرائع "
https://www.cnmu.info/2021/11/Sahl.html
شكرا أستاذ
ردحذف
الردود