كيف يتم استخدام تأثير التحميل (Loading) في صفحة الويب

Ahmed Alhamdany · 14 أغسطس 2020

تحية طيبة لحضراتكم

سؤالي عن كيفية استخدام loading عند التنقل بين الصفحات

اين اضع الاكواد وكيفية عمل هذه التقنيه

مع جزيل الشكر للجميع

عزام عبد الحافظ · 14 أغسطس 2020

مرحبًا @Ahmed Alhamdany,

لعمل تأثير التحميل (Loading) ريث الصفحة تكتمل التحميل , يحب عليك في كل صفحة عمل التالي:

وضع عنصر يحمل صورة متحرّكة و نقوم بتوسيطه في منتصف الصفحة
إخفاء جسم الصفحة كاملاً بإستخدام CSS بتنسيق body: visible;
و بإستخدام لغة الجافا سكريبت نتحكم بإخفاء عنصر Loading بعد إكتمال الصفحة , و نظهر جسم الصفحة مجدداً بتغير التنسيق عن طريق الحافا سكريبت .

مثال يعمل (يستخدم نسخة Jquery من الجافا سكريبت):

<!DOCTYPE html>
<html dir="rtl">
<head>
  <!-- للصفحة Jquery دعم -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
	/*إخفاء عنصر الجسم*/
	body {
    overflow: hidden;
    }
  	
  /*Loading تنسيق عنصر الأب لعنصر */
    #preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99;
    }
    
  /*و إعطاء صورة متحركة له Loading تنسيق عنصر */
    #status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px;
    }
</style>
</head>
<body>
	
  <!--Loading عنصر الذي يحتوي على -->
	<div id="preloader">
	  <div id="status"></div>
	</div> 
	
	<h1>مرحبًا</h1>
	
	<script>
	
   $(window).on('load', function() { // نتأكد من إكتمال الصفحة
     
    $('#status').fadeOut(); //Loading هنا نقوم بإخفاء عنصر 
    $('#preloader').delay(350).fadeOut('slow'); //Loading إخفاء عنصر الأب لعنصر  
    $('body').delay(350).css({'overflow':'visible'});// إظهار جسم الصفحة
     
  });
	
	</script>
</body>
</html>

Ahmed Alhamdany · 14 أغسطس 2020

عاشت ايدك على التوضيح الجميل اخ عزام

اخي بس استفسار اذا الاشاره ضعيفة راح تستمر ايقونة loading بالظهور الى ان يتم تحميل الصفحة بصورة كاملة ؟؟

تم التعديل في 14 أغسطس 2020 بواسطة Ahmed Alhamdany

عزام عبد الحافظ · 15 أغسطس 2020

بتاريخ 18 ساعات قال Ahmed Alhamdany:

خي بس استفسار اذا الاشاره ضعيفة راح تستمر ايقونة loading بالظهور الى ان يتم تحميل الصفحة بصورة كاملة ؟؟

مرحبًا أخي أحمد , نعم و هذه هي فائدة عنصر التحميل , إظهار ايقونة متحرّكة تفيد للمستخدم أن الصفحة على قيد التحميل ولا يظن أن الموقع لا يعمل .

كيف يتم استخدام تأثير التحميل (Loading) في صفحة الويب

السؤال

Ahmed Alhamdany

3 أجوبة على هذا السؤال

Recommended Posts

عزام عبد الحافظ

Ahmed Alhamdany

عزام عبد الحافظ

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية