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

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

این کد ها را در فایل css خود قرار دهید:
<ol dir="ltr" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 57px; list-style-type: none; list-style-position: initial; list-style-image: initial; line-height: 18px; color: rgb(86, 86, 86); font-size: 12px; ">
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> .loading-invisible{
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> ; display:none
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> {
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> }loading-visible.
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> ; display:block
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> position:absolute;
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> ; top:75px
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> ; left: 0px
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> ; width:100%
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> ; text-align:center
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> ; background:#fff
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> ; border-top:1px solid #ddd
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> ; border-bottom:1px solid #ddd
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> ; z-index: 100
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> {

کلاس اول برای عدم نمایش و کلاس دوم برای نمایش لودینگ می باشد.
این کد را در ابتدای تگ body قرار دهید :
<ol dir="ltr" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 57px; list-style-type: none; list-style-position: initial; list-style-image: initial; line-height: 18px; color: rgb(86, 86, 86); font-size: 12px; ">
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> <div id=“loading” class=“loading-invisible”>
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> <img src=“loading.gif” width=“97″ height=“44″ alt=“loading” />
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> </div>

همانطوری که می بینید از یک gif برای لودینگ استفاده شده است که در داخل یک div با کلاس loading-invisible می باشد . این کلاس در ابتدا باعث می شود که div نمایش پیدا نکند ! بله یعنی اگر از این کد ها بدون جاوا استفاده بشود شما چیزی نخواهید دید.
دقت کنید از id برای فراخوانی جاوا اسکریپت استفاده می شود.
خوب حالا نوبت جاوااسکرپت می باشد کد زیر را درست بعد از تگ div قرار دهید:
<ol dir="ltr" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 57px; list-style-type: none; list-style-position: initial; list-style-image: initial; line-height: 18px; color: rgb(86, 86, 86); font-size: 12px; ">
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> <“script type=”text/javascript>
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> document.getElementById(“loading”).className = “loading-visible” ;window.onload=function(){
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> ; ” document.getElementById(”loading“).className = “loading-invisible
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> }
<li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> </script>

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