احتمالاً بارها وارد یک سایت شده‌اید و دیده‌اید که به محض ورود، تا زمانی که کل سایت بارگزاری شود، یک عکس چرخان و یا یک نوار که در حال پر شدن است، نمایش داده می‌شود، اگر می‌خواهید بدانید چطور این کار را در مورد سایت یا وبلاگ خودتان انجام دهید، این آموزش را دنبال کنید.
ابتدا صفحه زیر را ببینید:
http://tutorials.aftab.cc/web_designing/javascript/preloader
خواهید دید که به محض ورود، این عکس:
نمایش داده می‌شود و بعد از مدتی مخفی می‌شود.
البته چون صفحه ما طولانی نبود، خودمان تنظیم کرده‌ایم که بعد از 3 ثانیه آن عکس مخفی شود، اما کدی که در قسمت اول آموزش به شما ارائه می‌کنیم، بعد از لود شدن سایت، عکس را مخفی خواهد کرد.
ایده کلی این است که ما به محض لود شدن سایت، یک عکس به کاربر نمایش دهیم و به محض اینکه آخرین خط کدهای ما اجرا شد، این عکس را مخفی کنیم.
گام اول: در بین کدهای صفحه مورد نظرتان، تگ
را پیدا کنید. دقیقاً بعد از آن، کد زیر را قرار دهید:<div id="preloader" style="width:100px; position:fixed; left:50%; margin-left:-50px; top:200px; display:block; text-align:center; font-family:Tahoma; font-size:9pt; direction:rtl;"> <img src="img/preloader.gif" /><br/> لطفاً منتظر بمانید... div>
توجه کنید که عکس بالا را باید ذخیره کنید و به نام preloader در پوشه‌ای به نام img در کنار صفحه مورد نظرتان قرار دهید و یا اینکه هر کجا که خواستید قرار دهید، فقط آدرسی که در کد بالا قرمز شده است را به آدرس عکس تغییر دهید.
گام دوم: تگ را د بین کدهای صفحه خود پیدا کنید. (تقریباً انتهای کدهای صفحه می‌شود. یعنی یک خط مانده به آخر). این کدها را قبل از
<script type="text/javascript"> document.getElementById('preloader').style.display = "none"; </script>
این کد در حقیقت عکس بالا را مخفی می‌کند.
همین!
توضیحاتی برای حرفه‌ای‌ها:
1- اگر می‌خواهید یک صفحه سیاه با شفافیت کم، صفحه را غیرقابل کلیک کند (در اصطلاح صفحه را dim کند) مثل این صفحه:
http://tutorials.aftab.cc/web_designing/javascript/preloader/index2.html
به جای کد گام اول، از این کد استفاده کنید:
<div id="preloader" style="width:100px; position:fixed; left:50%; margin-left:-50px; top:200px; display:block; text-align:center; font-family:Tahoma; font-size:9pt; direction:rtl;"> <div style="position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:black; opacity:0.7;z-index:1000;">div> <div style="position:fixed; z-index:1001"> <img src="img/preloader.gif" /><br/> لطفاً منتظر بمانید... div> div>
2- اگر می‌خواهید بعد از چند ثانیه (مثلاً بعد از 5 ثانیه) عکس مخفی شود، وارد صفحه بالا یعنی این صفحه:
http://tutorials.aftab.cc/web_designing/javascript/preloader/index2.html
شوید و از منوی View گزینه Page Source را انتخاب کنید (یا کلیدهای Ctrl+U را فشار دهید) و کدهای جاوا اسکریپت که در انتهای صفحه آمده است را تحلیل کنید...
در حقیقت باید به جای کد گام دوم، این کد را قرار دهید:
<script type="text/javascript"> setTimeout(hide, 3000); function hide(){ document.getElementById('preloader').style.display = "none"; } </script>
3- به جای عکس لودینگ در بالا، می‌توانید از این عکس‌ها هم استفاده کنید:
http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader1.gif
http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader2.gif
http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader3.gif
http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader4.gif
http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader5.gif
http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader6.gif
http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader7.gif
http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader8.gif
http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader9.gif
موفق باشید؛
حمید رضا نیرومند
http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader2.gif
کلمات کلیدی: آموزش javascript, کدهای آماده جاوا اسکریپت, ابزارهای جاوا اسکریپت, javascript برای سایت و وبلاگ, ابزار بارگزاری برای صفحه سایت, ابزار load برای وبلاگ, مخفی کردن عکس بعد از لود شدن سایت, ترفندهای javascript, جلوگیری از کلیک در صفحه
English
العربی
Swedish
François
