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

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

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

 loading

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۹

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

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

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

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

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

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

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین