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

صِوان تمثل اداة التحميل المسبق شئ مفيد اذا كانت مدونتك تحتوي على العديد من الصور و المقالات و حالة تحميلها تقضي بضعة ثواني فهذه الاداة ستظهر للزائر انا سرعة المدونة مستقرة و جيدة دون ان يلحظو حجم التحميل اثناء التصفح حتى.

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

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

مرحباً! ايها الصواني.

صِوان محور الأبعاد الثلاث XYZ

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

---

قبل أن نبدأ ، دعنا نلقي نظرة على العرض التوضيحي لتصلك فكرة الأداة.

معاينة في صِوان unPlug

ماهي مكتبة jquery

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

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

1. الخطوة 1: أولاً وقبل كل شيء ، قم بتسجيل الدخول إلى لوحة تحكم بلوچر.
2. الخطوة 2: في لوحة التحكم بلوچر انقر على المظهر.
3. الخطوة 3: انقر فوق رمز السهم هذا بجوار الزر "تخصيص".
4. الخطوة 4: انقر فوق تحرير HTML ، ستتم إعادة توجيهك إلى صفحة التحرير.
5. الخطوة 5: ابحث الآن عن الكود ]] < /b:skin > من الممكن ان تتحلل لهكذا ]] &g t;< /b:skin & gt; والصق أكواد CSS التالية فوقها مباشرةً.

/* preloader by elhizazi code */
.wc-pre-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9999999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-animation: fade 3s forwards;-moz-animation: fade 3s forwards;-o-animation: fade 3s forwards;animation: fade 3s forwards;}
.wc-pre-wrap .wc-pre-start{position:relative;top:50%;left:50%;padding:30px;display:flex;background:transparent;flex-direction:column;align-items:center;transform: translate(-50% , -50%) scale(0.97);transition:all 0.3s ease}
.wc-pre-wrap .wc-pre-start svg{width:100px;height:100px;margin:auto;display:inline-block}
@-webkit-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@-o-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}

6. الخطوة 6: احفظ التغييرات بالنقر فوق هذا الرمز
7. الخطوة 7: الآن أضف كود xml التالي أسفل علامة < body>. إذا لم تجده ، فمن المحتمل أنه تم تحليله بالفعل وهو & lt; body & gt;.

<div class='wc-pre-wrap'>
<div class='wc-pre-start'>
<svg enable-background='new 0 0 0 0' id='L9' version='1.1' viewBox='0 0 100 100' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'> <path d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50' fill='#299e94'> <animateTransform attributeName='transform' attributeType='XML' dur='0.6s' from='0 50 50' repeatCount='indefinite' to='360 50 50' type='rotate'/></path></svg>
</div>  
</div>

8. الخطوة 8: احفظ التغييرات بالنقر فوق هذا الرمز

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

<svg version='1.1' id='L4' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <circle fill='#fff' stroke='none' cx='6' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.1'/> </circle> <circle fill='#fff' stroke='none' cx='26' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.2'/> </circle> <circle fill='#fff' stroke='none' cx='46' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.3'/></circle></svg>

<svg version='1.1' id='L5' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <circle fill='#fff' stroke='none' cx='6' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 15 ; 0 -15; 0 15' repeatCount='indefinite' to='360 25 25' begin='0.1'/> </circle> <circle fill='#fff' stroke='none' cx='30' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 10 ; 0 -10; 0 10' repeatCount='indefinite' to='360 25 25' begin='0.2'/> </circle> <circle fill='#fff' stroke='none' cx='54' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 5 ; 0 -5; 0 5' repeatCount='indefinite' to='360 25 25' begin='0.3'/></circle></svg>
  

<svg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <rect x='20' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> <rect x='30' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0.2s' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> <rect x='40' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0.4s' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> </svg>

<svg enable-background='new 0 0 0 0' id='L9' version='1.1' viewBox='0 0 100 100' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'> <path d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50' fill='#fff'> <animateTransform attributeName='transform' attributeType='XML' dur='0.6s' from='0 50 50' repeatCount='indefinite' to='360 50 50' type='rotate'/></path></svg>

9. الخطوة 9: مبروك لقد تم ذلك! الآن أضف جاڤا سكريبت التالي أعلى علامة < / body >. إذا لم تجده ، فمن المحتمل أنه تم تحليله بالفعل وهو & lt; / body & gt;.

<script>
//<![CDATA[
//preloader by elhizazi
document.addEventListener('DOMContentLoaded',function(){
setTimeout(function(){
document.querySelector('.wc-pre-wrap').style.display ='none';
}, 3000);
});
//]]> 
</script>

10. الخطوة 10: احفظ التغييرات بالنقر فوق هذا الرمز

تعديل الكود

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

المشاركات ذات الصلة

شروط الاستخدام

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

---

لتقدير أعمال جمال الحزازي ، ضع في اعتبارك الاحتفاظ بالاعتمادات في الرموز التي ستستخدمها.

استنتاج

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

المصدر:
Siwane©
بتصريف من elhizazi