درگاه واسط طراحی وب سایت
مشاهده نمونه کارها

اطـلاعیــه

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

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


این مطلب در تاریخ ۲۱ شهریور ۱۳۹۴ در دسته "آموزش < آموزش CSS < آموزش HTML < آموزش JavaScript" فرستاده شده است.
(87 مطلب ارسالی)

توی زندگیم در رقابت با کسی نیستم، هدف من شکست موفقیت قبلیمه...


پوریا
نمایش لودینگ تا بارگذاری کامل صفحه
نمایش لودینگ تا بارگذاری کامل صفحهReviewed by امیرحسام on Sep 12Rating: 3.5نمایش لودینگ تا بارگذاری کامل صفحه

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

در این آموزش قرار است که بهتون یاد بدیم چطوری یک صفحه بارگذاری را با کمی HTML کمی CSS و جی کوئری برای خود درست کنید.

فواید این کار

  • نمایش کامل محتوا پس از بارگذاری
  • نمایش درست اسکریپت هایی که با جی کوئری و جاوا درست شدند
  • سبک و کم بودن حجم کار (با صرف نظر از JQuery ????)

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

قبل از هر کاری ما باید کد HTML رو داخل قالب قرار دهیم. پیشنهاد میشود که این کد را قبل از تگ </body> و یا بعد از شروع تگ <body> قرار دهید.

حال نوبت به استایل دهی به کار است. قطعه کد زیر را به style.css و یا یک فایل css که در قالبتون استفاده میشود اضافه کنید:

قدم آخر فراخوانی Jquery و تعریف تابع ها هست. (ما برای اینکار از جی کوئری گوگل استفاده میکنیم پس آن را در قالب فراخوانی میکنیم. شما میتوانید به دلخواه جی کوئری های دیگر را استفاده کنید)
کد زیر را قبل از </head> قرار دهید:

ما قرار است ترتیبی صورت دهیم که پس از نمایش بارگذاری کامل سایت صفحه لودینگ حذف شود.
در جی کوئری تابعی وجود دارد به اسم load() که شما میتوانید با استفاده از آن بگید که پس از بارگذاری ان عنصر چه اتفاقی بیوفتد.

به کد زیر دقت کنید:

ما اینجا از window استفاده کردیم که یعنی زمانی که این پنجره ای که باز شده به صورت کامل بارگذاری شد عنصر loading رو پنهان شود.

این آموزش هم به اتمام رسید و امیدواریم که استفاده لازم را برده باشید.
سورس این آموزش پیوست شد و میتوانید دریافت نمایید.

تا درودی دیگر بدرود

ShortLink:   http://naz-skin.ir/?p=2278