آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

آموزش نمایش لودینگ تا بارگذاری کامل صفحه

 loading

آموزش نمایش لودینگ تا بارگذاری کامل صفحه

باسلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان

امروز با یکی دیگه از تکنیک های طراحی در خدمتتون هستم. شاید خیلی براتون پیش اومده باشه که بخواین برای صفحات وبی که طراحی می کنید یک لودینگ هم قرار بدید.

در این مقاله یه آموزش کوتاهی تهیه کردم، که نحوه ی ایجاد لودینگ تا بارگذاری کامل صفحه رو خدمتتون توضیح میدم و امیدوارم که براتون مفید باشه.

ابتدا پیشنهاد می کنم دموی کار رو مشاهده کنید.

خوب بیاین یاد بگیریم که چطور این لایه ی لودینگ رو ایجاد کنیم. اول کد html رو پیاده می کنیم:

در اینجا من لایه ی لودینگ رو ایجاد کردم، کلاس loading رو به لایه اختصاص دادم و یک تصویر svg که لودینگ صفحه رو نمایش میده هم قرار دادم. حالا یه استایل هم به این لایه میدم تا تمام صفحه رو بطور کامل پر کنه.

چیزی که به نظرم مناسب اومد این بود که یه پس زمینه تقریبا تیره به این لایه بدیم و تصویر لودینگ رو هم در وسط صفحه قرار بدیم.

برای اینکه بتونیم این کار رو انجام بدیم، باید از position ها استفاده کنیم.

به لایه ی لودینگ عرض و ارتفاع ۱۰۰ درصد دادیم تا تو تمامی عرض و ارتفاع صفحه باز بشه و تمام صفحه رو پر کنه. بعد بهش یه پس زمینه تیره رنگ اما شفاف دادیم تا اجزای صفحه از زیر لایه مشخص باشند. برای اینکار از rgba استفاده کردیم و میزان شفافیت اون رو با ۰.۷ مشخص کردیم. در آخر با position:fixed اون رو تو صفحه ثابت کردیم و گفتیم از بالا و سمت راست کاملا به لبه های صفحه بچسبه.

حالا نوبت میرسه به تصویر لودینگ که از svg استفاده کردیم، به دلیل اینکه هم کیفیت بهتری داره هم هر اندازه که بخواین میتونید تغییر سایز بهش بدید.

 

در اینجا به تصویر لودینگ هم position دادیم و اون رو تو صفحه فیکس کردیم و از بالا و سمت راست فاصله درصدی بهش دادیم تا تو تمامی رزولوشن ها تقریبا وسط صفحه قرار بگیره.

اگر دقت کرده باشید به هر دو لایه z-index دادیم. لایه ی تیره رنگ چون قراره زیر تصویر باشه مقدار z-index کمتری بهش دادیم و به تصویر لودینگ چون قراره روی لایه قرار بگیره z-index بیشتری دادیم.

تا اینجا لودینگ صفحه رو ایجاد کردیم، زمانی که شما صفحه رو باز کنید این لودینگ به نمایش درمیاد. حالا میخوایم بگیم وقتی تمامی المان های صفحه بطور کامل بارگزاری شدند این لایه ی لودینگ محو بشه. برای این کار از جی کوئری استفاده می کنیم.

ابتدا کتابخانه جی کوئری رو از سایت Jquery.com دانلود کنید و در ابتدای صفحه فراخوانی کنید:

حالا با دستوران جی کوئری میگیم زمانی که صفحه لود شد، لایه لودینگ محو بشه:

دقت داشته باشید که کد لودینگ رو بعد از فراخوانی کتابخانه جی کوئری تو صفحه تون قرار بدید. با دستور بالا گفتیم از تابع و افکت fadeout استفاده کن و لایه loading رو پنهان کن.

 

خوب دوستان شما تونستید به همین راحتی لودینگ برای صفحه تون ایجاد کنید.

میتونید پروژه رو در انتهای مقاله دانلود کنید.

امیدوارم که براتون مفید بوده باشه.

دوستان لطف کنید کپی رایت رو هم رعایت کنید، بذارید انگیزه گسترش علم طراحی وب از بین نره و همیشه تو این مدرسه شاهد آموزش های مفیدی باشید.

موفق و پاینده باشید.

تهیه شده در مدرسه مجازی ایرانیان

دموی آنلاین
دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • مهدی رضایی

    با سلام
    لینک ها خراب هست هم دمو هم دانلود
    با تشکر

    • میترا رحیمی

      سلام
      نه دوست عزیز
      هر دو لینک صحیح هست و مشکلی نمیبینم.
      موفق باشید.

  • شابان

    من یه لودینگ عرضی میخوام که به صورت درصدی حرکت کنه

  • hossein hassani

    ممنونم همیشه درباره نحوه ساخت لودینگ فکر میکردم ولی فکر نمیکردم به این سادگی باشه.البته من از جی کوئری چیزی سردر نمیارم ولی همین که با این روش آشنا شدم خیلی خوب بود.یه مثال گذاشتم که البته بیشتر روی قسمت css اون کار کردم.
    http://s5.picofile.com/file/8165058176/myloader.rar.html

  • poOrya

    خیلی هم عالی
    البته بهترخ پس زمینه رو کاملا تیره قرار بدیم ، اینطوری بازدید کننده یه خورده اذیت میشه ، هر چند خودم به شخصه اعتقادی به لودینگ ندارم ، محتوا باید کم کم برای بازدید کننده لود شه

    • میترا رحیمی

      سلام دوست عزیز
      دیگه تیره تر کردنش سلیقه ای هست، این مورد لودینگ بیشتر زمانی کاربرد داره که کاربر یا مدیر سایت اطلاعات یه فرمی رو ارسال میکنن، صفحه لاک میشه که دیگه رو دکمه یا اجزای صفحه کلیک نکنن تا عمل ارسال کامل انجام بشه.
      بعضی از کاربرها که اطلاعاتی رو ارسال میکنن چندین مرتبه رو دکمه ارسال کلیک میکنن یا اگر اطلاعات حجیم باشه ، طی ارسال اطلاعات رو لینک های دیگه ی صفحه کلیک میکنن و نمیذارن ارسال اطلاعات کامل انجام بشه.
      کاربرد اصلی لاک صفحه به این شکل تو این موارد هست.
      موفق و پاینده باشید.

  • mohammad

    لطفاً آموزش ایجاد این دوتا باکسی که تو ستون سمت راست سایته و قرمزه و سبزه برای ثبت نام و ورود هست رو بزارید. از همون افزونه هم استفاده میکنم

    • میترا رحیمی

      سلام دوست عزیز
      مورد خاصی نیست که نیاز به آموزش داشته باشه ، دو تا لینک هست که استایل بهشون دادیم و اون هارو به صفحات ورود ، پیشخوان و خروج لینک کردیم.

وبلاگ مدرسه

مختصری درباره ما
مدرسه مجازی ایرانیان در زمینه آموزش علوم و فنون طراحی و برنامه نویسی صفحات وب اعم از آموزش زبان های برنامه نویسی و کدنویسی و همچنین آموزش طراحی گرافیک توسط نرم افزارهای گرافیکی پیکسلی و برداری فعالیت دارد .
ورود به وبلاگ

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟