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


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

این کد ها را در فایل css خود قرار دهید:
.loading-invisible{
display:none;
}
.loading-visible{
display:block;
position:absolute;
top:75px;
left:0;
width:100%;
text-align:center;
background:#fff;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index: 100;}
کلاس اول برای عدم نمایش و کلاس دوم برای نمایش لودینگ می باشد.

این کد را در ابتدای تگ body قرار دهید :
<div id="loading" class="loading-invisible"><b>loading...</b><br />
<img src="loading.gif" alt="loading" />
</div>همانطوری که می بینید از یک gif برای لودینگ استفاده شده است که در داخل یک div با کلاس loading-invisible می باشد . این کلاس در ابتدا باعث می شود که div نمایش پیدا نکند ! بله یعنی اگر از این کد ها بدون جاوا استفاده بشود شما چیزی نخواهید دید.
دقت کنید از id برای فراخوانی جاوا اسکریپت استفاده می شود.

خوب حالا نوبت جاوااسکرپت می باشد کد زیر را درست بعد از تگ div قرار دهید:
<script type="text/javascript">
document.getElementById("loading").className = "loading-visible"; window.onload=function(){
document.getElementById("loading").className = "loading-invisible";
}
</script>
خط اول بدین معنی است که نام کلاس جایی که id آن loading است را به loading-visible تغییر بده .با این تغییر کلاس ، تگ div که شامل gif است نمایش می یابد.
خط بعد بدین معنی است که زمانی که صفحه ما لود شد آنگاه نام کلاس جایی که id آن loading است را به loading-invisible تغییر بده. با این تغییر کلاس ، تگ div که شامل gif است دیگر نمایش نمی یابد.
نمونه - demo