لودینگ برای صفحات با استفاده از جاوا اسکریپت و سی اس اس

سه شنبه, ۹ام تیر , ۱۳۸۸ | ۲۴ دیدگاه

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

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

در این جا کد بسیار ساده ای البته با کمک css نوشته شده که برای لودینگ میتواند بسیار کارمد باشد.

تشریح:

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

این کد ها را در فایل css خود قرار دهید:

  1. .loading-invisible{
  2. ; display:none
  3. {
  4. }loading-visible.
  5. ; display:block
  6. position:absolute;
  7. ; top:75px
  8. ; left: 0px
  9. ; width:100%
  10. ; text-align:center
  11. ; background:#fff
  12. ; border-top:1px solid #ddd
  13. ; border-bottom:1px solid #ddd
  14. ; z-index: 100
  15. {

کلاس اول برای عدم نمایش و کلاس دوم برای نمایش لودینگ می باشد.

این کد را در ابتدای تگ body قرار دهید :

  1. <div   id=“loading” class=“loading-invisible”>
  2. <img  src=“loading.gif” width=“97” height=“44” alt=“loading” />
  3. </div>

همانطوری که می بینید از یک gif برای لودینگ استفاده شده است که در داخل یک div با کلاس loading-invisible می باشد . این کلاس در ابتدا باعث می شود که div نمایش پیدا نکند ! بله یعنی اگر از این کد ها بدون جاوا استفاده بشود شما چیزی نخواهید دید.

دقت کنید از id برای فراخوانی جاوا اسکریپت استفاده می شود.

خوب حالا نوبت جاوااسکرپت می باشد کد زیر را درست بعد از تگ div قرار دهید:

  1. <“script type=”text/javascript>
  2. document.getElementById(“loading”).className = “loading-visible” ; window.onload=function(){
  3. ; ” document.getElementById(“loading“).className = “loadinginvisible
  4. }
  5. </script>

خط اول بدین معنی است که نام کلاس جایی که id آن loading است را به loading-visible تغییر بده .با این تغییر کلاس ، تگ div که شامل gif است نمایش می یابد.

خط بعد بدین معنی است که زمانی که صفحه ما لود شد آنگاه نام کلاس جایی که id آن loading است را به loading-invisible تغییر بده. با این تغییر کلاس ، تگ div که شامل gif است دیگر نمایش نمی یابد.

به همین سادگی با کمک css توانستیم یک loading با کمترین حجم بسازیم.

خودآموز فوق توسط دوست بسیار خوبم آقای “بهزاد علی بیگی ” تهیه و نوشته شده است.

Be Sociable, Share!


۲۴ دیدگاه


  1. مهرداد
    ۱۰ تیر ۱۳۸۸

    سلام
    میشه یه منبع خوب واسه آموزش سی‌اس‌اس معرفی کنید؟




  2. کامران
    ۱۰ تیر ۱۳۸۸

    سورس انگلیسی یا فارسی میخوای مهرداد جان؟




  3. مهرداد
    ۱۰ تیر ۱۳۸۸

    سلام
    با تشکر از توجه‌ات. راستش فارسی می‌خوام.
    بیشتر دنبال یه منبعی هستم مثل html.ir اما برای سی‌اس‌اس مثلا. اون سایت اچ‌تی‌ام‌ال رو خیلی خوب توضیح داده.




  4. کامران
    ۱۰ تیر ۱۳۸۸

    والا تا الان سایت فارسی مناسب و تخصصی رو ندیدم
    ولی چشم میگردم اگه پیدا کنم برای ایمیل میکنم




  5. مهرداد
    ۱۰ تیر ۱۳۸۸

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




  6. محمد رضا
    ۱۲ تیر ۱۳۸۸

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




  7. بهزاد علي بيگي
    ۱۲ تیر ۱۳۸۸

    باید کد css خودتونو عوض کنید بدین صورت :

    body{height:100%}
    div.loading-invisible{
    display:none;
    }
    div.loading-visible{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
    background:#fff;
    _background:none;
    opacity:.75;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    padding-top:25%;
    }




  8. کامران
    ۱۲ تیر ۱۳۸۸

    ممنون بهزاد جان




  9. محمد رضا
    ۱۳ تیر ۱۳۸۸

    میشه کد های جاوا اسکریپت و Css رو درون یک فایل zip بذارید و برای دانلود قرار بدید ؟ چون اینطوری که شما نوشتید زمان copy کد ها بهم می ریزه !!! و به نوعی قابل استفاده نیست !




  10. کامران
    ۱۳ تیر ۱۳۸۸

    هر کدی رو که بهم میریزه تو این سایت در قسمت سمت راست پایین Pasteکن

    فقط قبلش از تو لیست مشخص کن که نوع کد چیه. مثلا برای کد بالا CSS رو انتخاب کن :

    http://qbnz.com/highlighter




  11. کامران
    ۱۳ تیر ۱۳۸۸

    در رابطه با معرفی یه منبع خوب برای آموزش CSS به زبان فارسی یه نگاهی به این سایت بنداز محمد جان :
    http://www.neopersia.org




  12. مهرداد
    ۱۳ تیر ۱۳۸۸

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




  13. کامران
    ۱۳ تیر ۱۳۸۸

    ممنونم مهرداد جان
    شما لطف دارید به من، قابل نداشت
    منظورم شما بودید، منتها تو این پست اکثر جوابها بر میگشت به محمد این یکی رو اشتباه گفتم




  14. saeed
    ۱۶ شهریور ۱۳۸۸

    سلام
    مطالبتون حرف نداره
    می تونید منو با نرم افزار SWiSH Max2 و یا flash mx اموزش بدین که بنز های تبلیغاتی بسازم
    موفق باشید




  15. Hamed
    ۳ مهر ۱۳۸۸

    ممنون
    اما میشه بیشتر توضیح بدین که این ترفند در چه مواقعی باید به کار بست یعنی به درد چه سایتهایی با چه موضوع هایی میخوره ؟

    آخه چه لزومی داره با این کار بازدید کننده منتظر بزاریم! شاید طرف پشیمون بشه و کلا از دیدن سایت ما بگذره ؟!
    به خصوص اگر با دایلاپ باشه




  16. کامران
    ۳ مهر ۱۳۸۸

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




  17. Hamed
    ۶ مهر ۱۳۸۸

    در این صورت ما یکی از برتری های FF نسبت IE رو از بین می بریم.در FF هر چیزی که لود میشه به نمایش میزاره ولی IE صبر میکنه تا همه … (خودتون میدونید)
    پس با FF تا وقتی عکسها و کل صفحه لود بشه کاربر میتونه خودشو با مطالب سایت مشغول کنه و این انتظار کمتر به نظر میرسه
    کلاّ به نظر من این کار برای سایتهای ایرانی مناسب نیست!
    به هر حال ممنون از این مطلب خوبتون استفاده کردیم.




  18. محمد
    ۱۲ خرداد ۱۳۸۹

    خیلی ممنون اما اگه بخوایم فایل gif رو عوض کنیم

    رو هم باید عوض کنیم




  19. hadi
    ۱۶ خرداد ۱۳۸۹

    سلام
    جالب بود
    میخواستم بدون آیا سایتی برای معرفی یا توضیح درباره کلاس در جاوا سراغ دارید؟




  20. سعید
    ۱۱ مرداد ۱۳۸۹

    سلام برادر جان

    آقا من هرکاری میکنم نمیتونم این کد رو توی سایتم فعال کنم. (از جوملا استفاده میکنم)

    با خودم فکر کردم فایل css و فایل html رو براتون آپ کنم تا خودتون زحمت ویرایش رو بکشید.

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

    http://shiapics.persiangig.com/shiapics.zip

    خیلی خیلی تشکر میکنم
    یا علی




  21. koZZet
    ۹ آذر ۱۳۸۹

    خیلی عالی بود… ممنون ممنون ممنون




  22. گلی
    ۱۳ بهمن ۱۳۸۹

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




  23. مرجان
    ۶ فروردین ۱۳۹۰

    خیلی عالی بود. مرسی




  24. سامان
    ۲۴ فروردین ۱۳۹۰

    سلام میگم این کد CSS چیه میشه نوصیح بدید؟ نمیدونم



دیدگاه خود را بنویسید