o_real_love
Well-Known Member
در این مقاله سعی دارم راهی را برای یک لود ساده و البته کارآمد را برای صفحات وب آموزش دهم .
در اینترنت کد های زیادی برای لودینگ صفحات وب موجود است که اکثرا فقط با جاوا اسکریپت نوشته شده است و خوب حجم بالا آن و نا مفهوم بودن آن برای برنامه نویسان مبتدی کمی کار رو مشکل کرده و فقط از این کد ها استفاده می شود بدون این که منطق آن را درک کرده باشند.
در این جا کد بسیار ساده ای البته با کمک css نوشته شده که برای لودینگ میتواند بسیار کارمد باشد.
تشریح:
منطق کار بدین صورت است که با جاوا اسکریپت می توان فهمید که صفحه کامل لود شده و بعد از آن تگی که لودینگ در آن است را نمایش نمیدهیم .یعنی زمانی که لود صفحه تمام شد آن را پنهان می کنیم .به همین راحتی!
این کد ها را در فایل css خود قرار دهید:
این کد را در ابتدای تگ body قرار دهید :
همانطوری که می بینید از یک gif برای لودینگ استفاده شده است که در داخل یک div با کلاس loading-invisible می باشد . این کلاس در ابتدا باعث می شود که div نمایش پیدا نکند ! بله یعنی اگر از این کد ها بدون جاوا استفاده بشود شما چیزی نخواهید دید.
دقت کنید از id برای فراخوانی جاوا اسکریپت استفاده می شود.
خوب حالا نوبت جاوااسکرپت می باشد کد زیر را درست بعد از تگ div قرار دهید:
خط اول بدین معنی است که نام کلاس جایی که id آن loading است را به loading-visible تغییر بده .با این تغییر کلاس ، تگ div که شامل gif است نمایش می یابد.
خط بعد بدین معنی است که زمانی که صفحه ما لود شد آنگاه نام کلاس جایی که id آن loading است را به loading-invisible تغییر بده. با این تغییر کلاس ، تگ div که شامل gif است دیگر نمایش نمی یابد.
به همین سادگی با کمک css توانستیم یک loading با کمترین حجم بسازیم.
در اینترنت کد های زیادی برای لودینگ صفحات وب موجود است که اکثرا فقط با جاوا اسکریپت نوشته شده است و خوب حجم بالا آن و نا مفهوم بودن آن برای برنامه نویسان مبتدی کمی کار رو مشکل کرده و فقط از این کد ها استفاده می شود بدون این که منطق آن را درک کرده باشند.
در این جا کد بسیار ساده ای البته با کمک css نوشته شده که برای لودینگ میتواند بسیار کارمد باشد.
تشریح:
منطق کار بدین صورت است که با جاوا اسکریپت می توان فهمید که صفحه کامل لود شده و بعد از آن تگی که لودینگ در آن است را نمایش نمیدهیم .یعنی زمانی که لود صفحه تمام شد آن را پنهان می کنیم .به همین راحتی!
این کد ها را در فایل css خود قرار دهید:
.
کلاس اول برای عدم نمایش و کلاس دوم برای نمایش لودینگ می باشد.
کد:
[LEFT]loading-invisible{; display:none{}loading-visible.; display:blockposition:absolute;; top:75px; left: 0px; width:100%; text-align:center; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd; z-index: 100[/LEFT]
{این کد را در ابتدای تگ body قرار دهید :
کد:
<div id=“loading” class=“loading-invisible”>
<img src=“loading.gif” width=“97″ height=“44″ alt=“loading” />
</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 است دیگر نمایش نمی یابد.
به همین سادگی با کمک css توانستیم یک loading با کمترین حجم بسازیم.
