المعاينات والمرفقات
ما هو تأثير التحميل الذي يضاف لكامل القالب ؟
هو تأثير يقوم بتغطية كامل القالب لحين تمام تحميل الأدوات الموجودة فيه
ما فائدته ؟
يجعل الزائر لديك تجنب لا يرى أى قفزات في تحميل القالب أثناء تحميل أكواده واتخاذ شكله الكامل
ما عيوبه ؟
هو ليس عيب ولكن خطأ في فهم عند بعض الزوار ان دخل الموقع وهناك مثلاً صور أوملف لا يستجيب فيظل التأثير هذا فعال فيظن الناس أن المشكلة فيه لكن الحقيقة المشكلة تكون في سيرفر الصور اوالملفات التي لا تستجيب وليس شرط أن يكون هو
هل يثقل القالب ؟
لا فهو يعتبر مجرد كود CSS بسيط فلا تأثير له على القالب
هل يصلح لكل القوالب ؟
لو قالبك مضاف له مكتبة Jquery فيصلح له
لو قالبك ليس مضاف له فلا يوجد معنى أن تضيف مكتبة كاملة قالبك لا يعمل بها لمجرد انك تريد تأثير CSS لهذا لا داعي منه إن لم يكن المكتبة فعلياً ضمن برمجيات قالبك والعادة إن معظم القوالب بالفعل تحتوي المكتبة
كذلك لو قالبك لا يوجد به أكواد فعلياً تأخذ وقت تحميل كسلايدرات أو قوائم لا داعي منه
أو لو هناك تأثير بالفعل في قالبك على الادوات نفسها هو مضاف بطريقة مختلفة فلا داعي لذلك أيضاً
كيف يمكنني إضافته ؟
ابحث عن وسم الفتح <body> في قالبك هو موجود في كل قالب لكن أحيانا يكون به class مثلاً هكذا
<body class='Examble'>
لكنك فهمت فكرة ايجاده بالجزء الأول منه
بعده مباشرة تضيف الكود التالي
<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>
تعديلات الكود
*المعلم بالأزرق هو لون الخلفية استخدم لون مناسب لقالبك
*بالأحمر هو شكل التأثير يمكنك استخدام الشكل المضاف فعلياً , وان أردت أشكال أخرى يمكنك اختيار شكل من تلك المكتبة
اضغط فقط على الشكل سيفتح لك صندوق الكود انسخ الجزء الخاص بـ CSS فقط واستبدله مع الكود الأحمر
*السطر المعلم باللون الوردي
هناك إصدارات من الـ Jquery لن يعمل معها ان لم يعمل معك استبدله بهذا
jQuery(window).load(function(){jQuery('#Waiting').fadeOut();});
ان لم يعمل بعد كل هذا معناه فقط أنه غير مناسب لقالبك
ملاحظة أخيرة هامة
لو الوسم <body> عندك بعده مباشرة أكواد بها هذا الجزء <b:class
تجاوزهم وأضف الكود بعدهم وليس قبلهم
الاشتراك في:
تعليقات الرسالة (Atom)
الله يحفظك ويبارك فيك ويطول في عمرك
ردحذفالله يرزقك من حيث لا تحتسب
شكرا جزيلا وكثيرا على كل ما تقوم به هنا
تحية لك من محبك صحراوي منير الجزائر ♥
اللهم آمين واياكم أخي الحبيب , حفظك الله وبارك في عمرك انت وكل اهل الجزائر الحبيب
حذفشكرا على الشرح
ردحذفعلى الرحب والسعة أخي الغالي
حذفهذا الدرس متجاوب تماما مع قالب " سهل الرائع "
ردحذفhttps://www.cnmu.info/2021/11/Sahl.html
شكرا أستاذ
شكراً اخي منير على مشاركتنا بتجاربك مع الأدوات والقوالب هذا مفيد لمن يقرأون الموضوع ويستخدمون نفس القالب بارك الله فيك
حذف