Ahmed Alhamdany نشر 14 أغسطس 2020 أرسل تقرير مشاركة نشر 14 أغسطس 2020 تحية طيبة لحضراتكم سؤالي عن كيفية استخدام loading عند التنقل بين الصفحات اين اضع الاكواد وكيفية عمل هذه التقنيه مع جزيل الشكر للجميع 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عزام عبد الحافظ نشر 14 أغسطس 2020 أرسل تقرير مشاركة نشر 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> 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Ahmed Alhamdany نشر 14 أغسطس 2020 الكاتب أرسل تقرير مشاركة نشر 14 أغسطس 2020 (معدل) عاشت ايدك على التوضيح الجميل اخ عزام اخي بس استفسار اذا الاشاره ضعيفة راح تستمر ايقونة loading بالظهور الى ان يتم تحميل الصفحة بصورة كاملة ؟؟ تم التعديل في 14 أغسطس 2020 بواسطة Ahmed Alhamdany 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عزام عبد الحافظ نشر 15 أغسطس 2020 أرسل تقرير مشاركة نشر 15 أغسطس 2020 بتاريخ 18 ساعات قال Ahmed Alhamdany: خي بس استفسار اذا الاشاره ضعيفة راح تستمر ايقونة loading بالظهور الى ان يتم تحميل الصفحة بصورة كاملة ؟؟ مرحبًا أخي أحمد , نعم و هذه هي فائدة عنصر التحميل , إظهار ايقونة متحرّكة تفيد للمستخدم أن الصفحة على قيد التحميل ولا يظن أن الموقع لا يعمل . اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Ahmed Alhamdany
تحية طيبة لحضراتكم
سؤالي عن كيفية استخدام loading عند التنقل بين الصفحات
اين اضع الاكواد وكيفية عمل هذه التقنيه
مع جزيل الشكر للجميع
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.