ایران سرفراز- نرم افزار وپروژهای دانشجویی


نرم افزار وپروژهای دانشجویی

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

mohsen_mahyar@yahoo.com

 

برای صفحات وب   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">

mohsen_mahyar@yahoo.com

<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>

2

ap_showWaitMessage('waitDiv', 0);

</SCRIPT>

حالا دیگر کدهای نوشته شده توسط شما کار خواهد کرد . کافی است صفحه مورد نظر را درون سایت خود قرار

دهید و سپس آنرا مشاهده نماید .

توجه داشته باشید این بر حسب شدن صفحه شما میباشد. loadpreload

3

mohsen_mahyar@yahoo.com

   + MOHSEN GHASEMI - ٢:٥٩ ‎ب.ظ ; ۱۳۸٩/۳/۳۱