Preload براي صفحات وب

**نقاب** · 01-01-2009

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 شدن صفحه شما ميباشد.

ابزار هاي گفتگو	جستجو اين تالار
نمايش نسخه براي چاپ فرستادن اين صفحه به وسيله ايميل	جستجو اين تالار: جستجو پيشرفته
نمايش رسم
نمايش خطي نمايش نوشته ها به شکل زير مجموعه هاي گفتگو تغيير به حالت رشته اي

گفتگو هاي مشابه
نام گفتگو	شروع کننده گفتگو	تالار	پاسخ ها	آخرين پست
طراحي انيميشن هاي زيباي فلش براي صفحات وب با نرم افزار قدرتمند KoolMoves 5.2.5	Oguz	نرم افزارهای گرافیکی	0	05-05-2008 06:11 PM
طراحي صفحات وب براي كار اداري	nfz	طراحي وب	0	06-30-2007 02:59 PM
طراحي صفحات وب براي كار اداري	nfz	طراحي وب	0	06-19-2007 11:08 AM
آموزش قرار دادن پسوورد براي صفحات وبلاگ	snow_boy	وبلاگ هاي فارسي	0	05-11-2007 03:48 PM
KoolMoves 5.7.1 نرم افزاری برای طراحي انيميشن هاي زيباي فلش براي صفحات وب	hamid_zebel82	نرم افزارهای یوتیلیتی(Utility) و متفرقه	0	01-24-2007 11:24 AM