preload برای صفحات وب

Preload براي صفحات وب
◊ مقدمه ◊
طراحي سنگين در بعضي از صفحات باعث زياد شدن حجم آن صفحات ميشود . حجم زياد صفحات مخصوصا
براي ما ايرانيان يك مشكل هميشگي و سدي براي طراحان بوده و خواهد بود ! همين موضوع باعث خستگي و
دلسرد شدن كاربر و بازديد كننده از صفحات ميش ود و باعث ميشود بازديد كنندگان سايت روز به روز كمتر شوند .
اما بايد براي اين كار چار ه اي انديشيد . معقولانه ترين راه طراحي منطقي و كم حجم در عين حال زيبا و كاربر
پسند است . اما گاهي اوقات نميتوان به هر دليلي صفحات را در حجم كم طراحي نمود مخصوصا صفحاتي كه
داراي عكسهاي زيادي هستند . پس براي مشكل دوم هم بايد يك راهي را در نظر گرفت تا بتوان طراحي خوبي
ارائه داد . در اين آموزش شما ياد خواهيد گرفت كه با يك سري دستورات جاوا اسكريپت چگونه براي صفحه
خود 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 > قرار دهيد . توجه داشته
باشيد تگ < > حتما بايد وجود داشته باشد ولي محتواي درون آن (در اين كد مثلا < TableDIV > ) ميتواند
با توجه به نياز شما تغيير كند.
سپس كد زير را دقيقا بالاي (قبل از ) </ body > قرار دهي د . (اين تگ در يك خط مانده به آخرين خط صفحه
شما قرار دارد)
<SCRIPT>
ap_showWaitMessage('waitDiv', 0);
</SCRIPT>
حالا ديگر كدهاي نوشته شده توسط شما كار خواهد كرد . كافي است صفحه مورد نظر را درون سايت خود قرار
دهيد و سپس آنرا مشاهده نمايد .
توجه داشته باشيد اين بر حسب شدن صفحه شما ميباشد. loadpreload3