TAHA
10-29-2009, 10:24 AM
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> قرار دهيد. توجه داشته باشيد تگ <DIV> حتما بايد وجود داشته باشد ولي محتواي درون آن (در اين كد مثلا <Table> ) ميتواند با توجه به نياز شما تغيير كند.
سپس كد زير را دقيقا بالاي (قبل از) </body> قرار دهيد. (اين تگ در يك خط مانده به آخرين خط صفحه شما قرار دارد)
<SCRIPT>
ap_showWaitMessage('waitDiv', 0);
</SCRIPT>
حالا ديگر كدهاي نوشته شده توسط شما كار خواهد كرد. كافي است صفحه مورد نظر را درون سايت خود قرار دهيد و سپس آنرا مشاهده نمايد .
توجه داشته باشيد اين preload بر حسب load شدن صفحه شما ميباشد.
طراحي سنگين در بعضي از صفحات باعث زياد شدن حجم آن صفحات ميشود. حجم زياد صفحات مخصوصا براي ما ايرانيان يك مشكل هميشگي و سدي براي طراحان بوده و خواهد بود! همين موضوع باعث خستگي و دلسرد شدن كاربر و بازديد كننده از صفحات ميشود و باعث ميشود بازديد كنندگان سايت روز به روز كمتر شوند. اما بايد براي اين كار چاره‌اي انديشيد. معقولانه ترين راه طراحي منطقي و كم حجم در عين حال زيبا و كاربر پسند است. اما گاهي اوقات نميتوان به هر دليلي صفحات را در حجم كم طراحي نمود مخصوصا صفحاتي كه داراي عكسهاي زيادي هستند. پس براي مشكل دوم هم بايد يك راهي را در نظر گرفت تا بتوان طراحي خوبي ارائه داد. در اين آموزش شما ياد خواهيد گرفت كه با يك سري دستورات جاوا اسكريپت چگونه براي صفحه خود 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 شدن صفحه شما ميباشد.