illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!
17 8146 ۲۴ خرداد ۹۳ محمد مهدی اکرمی

حتما تا حالا دیدید که خیلی از سایت ها معمولا میزان بارگزاری صفحه رو هنگام لود صفحه نشون می دهند ولی وقتی شما در اینترنت سرچ کرده باشید می بینید که کد معتبری برای این کار وجود نداره و اکثرا کار نمی کنند و یا از روی اصول کد نویسی نشدند . من امروز ابزاری را برای شما آماده کرده ام که به سادگی میتوانید بدون حتی یک خط کد نویسی یک لودینگ زیبا با کمک 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 گفته شد قرار بدید :

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

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

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

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

دیدگاه ها 17 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏

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

  • ‏‏
    فناوری ها|مرجع آموزش و برنامه نویسی(۵ تیر ۱۳۹۳)

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

  • ‏‏
    مهدی جان زاده(۶ تیر ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      وحید صالحی(۳۱ مرداد ۱۳۹۴)

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

      • ‏‏

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

        • ‏‏
          وحید صالحی(۳۱ مرداد ۱۳۹۴)

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram