أضف الآن Loader الى مدونتك على بلوجر

المستعمر للمعلوميات •
0
نحن في زمن الكل اصبح في عجلة من امره واقصد هنا بالخصوص زائرين موقعك، الذين يرون اي موقع يستغرق تحميله اكثر من ثانيتين على انه موقع بطيئ جدا فيجد الزائر نفسه يرى موقعك يُحَمَلُ بطريقة فظيعة مؤدية للعين حيث تظهر له صور وهي تتحمل شيئا فشيئا ويرى الكتابة بشكلها الأول قبل تحميل شكل الخط وكذلك يرى بعض اشكال CSS مجرد مربعات وغيرها من الأمور التي اراهن انك تعرفها، وكل هذا قد  يؤدي الى ان تفقد الزائر بسبب هذه النظرة العقيمة هنا يأتي دور Loader والذي هو ببساطة مجرد صفحة تظهر اثناء تحميل اي صفحة على موقعك، في الغالب هذه الصفحة تكون فارغة بلون خلفية معين ويتوسطها رسوم تتحرك تدل على ان صفحة موقعك مزالت في حالة التحميل وبمجرد ان تتحمل تختفي صفحة Loader وتظهر صفحة موقعك محملة مئة في المئة بصورها وبكل شيء، والفائدة من Loader هو انه يقوم بشد انتباه الزائر الى الرسومات التي تتحرك بهذا لا يشعر الزائر بالملل من انتظار تحميل الصفحة .

ما هو هذا Loader ؟

ببساطة هو مجرد صفحة تظهر اثناء تحميل موقعك وتختفي بعد تحميله وهذه الصفحة لها اشكال متعددة لكن غالبا ما تكون بخلفية معينة ويتوسطها انميشن (رسومات متحركة) يبين على ان صفحة موقعك مزالت في حالة التحميل وبمجرد ان ينتهي التحميل تختفي صفحة Loader لتظهر صفحة موقعك محملة وجاهزة ، وهذا ما يجعل الزائر ينتظر تحميل صفحة موقعك بدون ان يشعر بالملل .
في هذا الشرح ان شاء الله سوف اقدم لك شكل من اشكال هذا Loader وطريقة تركيبه
لكن لا بد ان احيل ان Java script تبع Loader يحتاج الى مكتبة jquery لذلك اتمنى ان تذهب الآن الى قالب مدونتك وتبحث هل يوجد jquery فيه ان لم يوجد فيجب عليك وضع هذا الكود فوق </head> .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

معاينة أنميشين Loader 

طريقة تركيب Loader على موقعك

  1. ضع كود CSS التالي فوق </head>
    2. <style>
.loaderr{position:fixed;background-color:#fff;width:100%;height:100%;z-index:1000}
.loader{position:relative;width:2.5em;height:2.5em;transform:rotate(165deg)}
.loader:before,.loader:after{content:"";position:absolute;top:50%;left:50%;display:block;width:0.5em;height:0.5em;border-radius:0.25em;transform:translate(-50%,-50%)}
.loader:before{animation:before 2s infinite}
.loader:after{animation:after 2s infinite}
@keyframes before{
  0%{width:0.5em;box-shadow:1em -0.5em rgba(225,20,98,0.75),-1em 0.5em rgba(111,202,220,0.75)}
  35%{width:2.5em;box-shadow:0 -0.5em rgba(225,20,98,0.75),0 0.5em rgba(111,202,220,0.75)}
  70%{width:0.5em;box-shadow:-1em -0.5em rgba(225,20,98,0.75),1em 0.5em rgba(111,202,220,0.75)}
  100%{box-shadow:1em -0.5em rgba(225,20,98,0.75),-1em 0.5em rgba(111,202,220,0.75)}
}
@keyframes after{
  0%{height:0.5em;box-shadow:0.5em 1em rgba(61,184,143,0.75),-0.5em -1em rgba(233,169,32,0.75)}
  35%{height:2.5em;box-shadow:0.5em 0 rgba(61,184,143,0.75),-0.5em 0 rgba(233,169,32,0.75)}
  70%{height:0.5em;box-shadow:0.5em -1em rgba(61,184,143,0.75),-0.5em 1em rgba(233,169,32,0.75)}
  100%{box-shadow:0.5em 1em rgba(61,184,143,0.75),-0.5em -1em rgba(233,169,32,0.75)}
}
html,body{height:100%}
.loader{position:absolute;top:calc(50% - 1.25em);left:calc(50% - 1.25em)}
</style>
  2. ضع كود HTML التالي تحت <body>
    3. <div class="loaderr">
  <div class="loader"></div>
</div>
  3. ضع كود JavaScript التالي فوق </body>
    4.   <script>
$(window).on('load', function () {
    $('.loaderr').hide();
});
  </script>
مهم جدا
إذا ما ظهر Loader ولم يختفي بمجرد تحميل صفحة موقعك فهذا دليل على انك نسيت وضع أكواد Java Script التي قدمتها لك وان كنت قمت بوضعها فتأكد من انك وضعت كود مكتبة Jquery في Head وهو اول كود قدمته لك .

المهم أتمنى ان تقوم بمتابعة موقعي لأني مستقبلا سوف اقدم لك Loaders بأشكال مختلفة .
Tags:

إرسال تعليق

أحدث أقدم