لودینگ سفارشی با jQuery (قسمت اول)

- visibility ۱۷ mode_comment

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

برای شروع اول Demo رو ببینید :

مراحل زیر رو دنبال کنید و اگر به مشکلی برخوردید در بخش دیدگاه مطرح کنید :

1- دانلود فایل loading.js .

مراجعه شود به پایین مطلب.

2- ویرایش فایل loading.js :

وقتی فایل رو دانلود کردین اون رو با notepad باز کنید . به آخر فایل بیایید . چیز هایی که شما باید ببینید :

barColor: رنگ اون خط جلو رونده و درصد رو تعیین میکند.

backgroundColor: رنگ پس زمینه لودینگ رو تعیین میکند.

percentage : این تنظیم دو مقدار False و True رو میگرد که تعیین میکند که آیا درصد میزان بارگزاری نمایش داده بشود یا نه که در حالت True نمایش داده میشود .

barHeight: میزان قطر اون خط جلو رونده رو تعیین میکنه .

completeAnimation: رنگ پس زمینه رو بعد از بارگزاری کامل تعیین میکند.

minimumTime: زمان  تأخیر حرکت خط جلو رونده رو تعیین میکند.

بعد از اینکه فایل رو ویرایش کردید اون رو ذخیره کنید و مرحله بعد رو انجام بدید.

3- آپلود فایل :

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

4- فراخونی فایل loading.js در سایت :

در این مرحله باید کد زیر رو در سایت یا وبلاگ خودتون قبل از کد </head> قرار بدید:

5- فراخوانی کتاب خانه jQuery :

اگر از وبلاگ استفاده میکنید حتما قطعه کد زیر رو قبل از کدی که در مرحله 4 گفته شد قرار بدید :

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

خوب الان دیگه همه چیز رو ذخیره کنید و یه بار سایتتون رو باز کنید و از لودینگ لذت ببرید !

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

info نکته :

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

comment دیدگاه کاربران
k1

در فایل loading.js هیچی نیست که وقتی دانلود می کنیم

لقمان آوند

مجددا دانلود کنید .
تصحیح شد .

رضا

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

لقمان آوند

ممنون بابت گزارش مشکل
تصحیح شد . می تونید مجددا دانلود کنید .

سلام متن آپلود شده رو توی کد قرار میدم و ذخیره میکنم ولی متن آپلود شده بعد از ذخیره خود به خود حذف میشه

مهدی اکرمی

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

مهدی جان زاده

از وبلاگ (بلاگفا)

مهدی اکرمی

در وبلاگتون نظر گذاشتم پاسخ رو دادم.

کد ها رو گذاشتم ، ولی نشد.

سعید

سلام
خیلی ممنون از مطلبتون،عالی بود،منم دنبال اینجور لودینگی میگشتم،فقط یه چیز
می تونین یه کدی بسازین که دیگه نیازی به کتابخانه جی کوری نداشته باشه؟
حجم کدها بالا میره 😥

وحید صالحی

آقا سعید اینقدر نگران حجم کد ها نباش عزیز:-)خیلی از سایت ها رو اگر کدهاشون رو نگاه کنی حجم کدهاشون(css و جاوااسکریپتشون) نسبتا بالاس نسبت به امکاناتی که دارن که با روش های بهینه سازی مثل کش کردن کدها که یکی از راهکار هاش هست میشه به راحتی سرعت لود رو افزایش داد توی دوره سئو که برگزار بشه این مسائل آموز داده میشه

سعید

چَشم 😀
یه سوال
چرا سازنده jquery، این زبان رو طوری طراحی کرده که نیاز به کتابخانه داره و مثل css یا … نکرده؟
اونی فردی که توانایی ساخت این زبان رو داره چرا نمی ره زبانش رو بدون نیاز به کتابخانه، درست کنه؟
فک کنم زبان برنامه نویسی رو با کدهای 0 و 1 میسازن،ساختنش خیلی سخته؟

وحید صالحی

کتابخانه یه اصطلاح هستش براش تا قابل درک تر باشه خوب اگر اینکار رو نمی کرد باید ازجاوااسکریپت استفاده کنه اینکار رو کردن تا کدنویسی ساده تر بشه و یک سری از کدها تکراری و پر کاربرد نیازی به کدنویسی توسط کاربر دیگه ای نداشته باشه و کلا کد نویسی کمتر اما با توانایی بیشتر انجام بشه شعار جی کوئری هم بر همین اساسه (write less,do more) (کمتر (کد) بنویس کارهای بیشتری انجام بده)
برنامه نویسی با 0 , 1 اصولا زیان های سطح پایین یا به عبارتی زبان ماشین نام داره که بیشتر برای توسعه دهنده و برنامه نویسی هست که پروژه هایی مثل سیستم عامل ها برنامه ریزی ماشین ها و مواردی از این قبیل رو روش کار میکنن .بله در نوع خودش میتونه مشکل باشه نقطه مقابل زبان ماشین زبان های سطح بالا هستند که شباهت بیشتری به زبان روزمره انسانها البته از نوع زبان انگلیسی داره که قالبت کار باهاش راحتره و بهتر میشه با هاش کارهای توسعه ای انجام داد
موفق باشید

Hadi Akbari

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

وحید صالحی

احتمالا یه جایی تداخل دارن با هم دیگه باید بررسی کنید

Hadi Akbari

کسی راهنمایی نمیکنه
در ضمن اسلایدرم جاوا هست

حسن

سلام عزیز راهی هست که اعداد لودینگ رو فارسی (فونت IranSans) کرد؟ یعنی شکل اعداد فارسی باشه،فارسی به فونت ایران سنس 😳

نیاز به لاگین

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