تبلیغات تبلیغات 
طراحی سنگین در بعضی از صفحات باعث زیاد شدن حجم آن صفحات میشود. حجم زیاد صفحات مخصوصا برای ما ایرانیان یك مشكل همیشگی و سدی برای طراحان بوده و خواهد بود! همین موضوع باعث خستگی و دلسرد شدن كاربر و بازدید كننده از صفحات میشود و باعث میشود بازدید كنندگان سایت روز به روز كمتر شوند. اما باید برای این كار چاره‌ای اندیشید. معقولانه ترین راه طراحی منطقی و كم حجم در عین حال زیبا و كاربر پسند است. اما گاهی اوقات نمیتوان به هر دلیلی صفحات را در حجم كم طراحی نمود مخصوصا صفحاتی كه دارای عكسهای زیادی هستند. پس برای مشكل دوم هم باید یك راهی را در نظر گرفت تا بتوان طراحی خوبی ارائه داد. در این آموزش شما یاد خواهید گرفت كه با یك سری دستورات جاوا اسكریپت چگونه برای صفحه خود Preloader قرار دهید. اینكار سبب میشود كه كاربر كمی آرامتر شده و تحمل آن هم برای دیدن صفحات بیشتر خواهد شد. این كار را میتوانید در تمام سایتها و یا وبلاگها عملی كنید.
برای شروع كار ابتدا كد جاوا اسكریپت زیر را در تگ <head> صفحه مورد نظرخود قرار دهید.
<SCRIPT>
var DHTML = (document.getElementById || document.all || document.layers);
function ap_getObj(name)
{
if (document.getElementById)
{
return document.getElementById(name).style;
}
else if (document.all)
{
return document.all[name].style;
}
else if (document.layers)
{
return document.layers[name];
}
}
function ap_showWaitMessage(div,flag)
{
if (!DHTML) return;
var x = ap_getObj(div);
x.visibility = (flag) ? 'visible':'hidden'
if(! document.getElementById)
if(document.layers)
x.left=280/2;
return true;
}
</SCRIPT>
و سپس كد زیر را بعد از <body> قرار دهید:
<DIV id=waitDiv style="LEFT: 40%; VISIBILITY: hidden; POSITION: absolute; TOP: 50%; TEXT-ALIGN:center">
<TABLE cellPadding=6 border=0>
<TBODY>
<TR>
<TD align=middle>
<IMG alt="Please wait" src="loading.gif">
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<SCRIPT>
ap_showWaitMessage('waitDiv', 1);
</SCRIPT>
در كدی كه بالا ذكر شد شما میتوانید طراحی مورد نظر خود را داخل تگ <DIV> قرار دهید. توجه داشته باشید تگ <DIV> حتما باید وجود داشته باشد ولی محتوای درون آن (در این كد مثلا <Table> ) میتواند با توجه به نیاز شما تغییر كند.
سپس كد زیر را دقیقا بالای (قبل از) </body> قرار دهید. (این تگ در یك خط مانده به آخرین خط صفحه شما قرار دارد)
<SCRIPT>
ap_showWaitMessage('waitDiv', 0);
</SCRIPT>
حالا دیگر كدهای نوشته شده توسط شما كار خواهد كرد. كافی است صفحه مورد نظر را درون سایت خود قرار دهید و سپس آنرا مشاهده نماید .
توجه داشته باشید این preload بر حسب load شدن صفحه شما میباشد.
