لودینگ - به وبلاگ دانش خوش آمدید

به وبلاگ دانش خوش آمدید

تباهی خرد در فریب خوردن از نیرنگهاست . [امام علی علیه السلام]

نوشته شده توسط: بهزاد

لودینگ

سه شنبه 87 فروردین 20 8:21 عصر

آموزش قرار دادن Loading برای وبلاگ ها و صفحات وب

لودینگی که امروز بهتون آموزششو میدم به این شیوه کار میکنه که هنگامی آدرس صفحه رو میزنید یه مستطیل مثل زیر در بالای صفحه میاد و هی پر میکنه تا صفحه کاملا لود شه .

صفحه در حال بارگذاری است!
لطفا کمی صبر کنید...

Please wait ...

بعد از اینکه صفحه کامل لود شد این Loading خود به خود محو میشه و شما صفحه رو به صورت کامل و لود شده می بینید .

خوب برای یاد گرفتن اینکه چطور چنین لودینگی در وبلاگ و یا صفحات داشته باشید ادامه ی مطلب رو بخونید :

اول یه توضیح کوچیک بدم که هر صفحه ی Html یا قالب وبلاگ با یک تگ شروع میشه و با تگ پایانی تموم می شه .

خوب حالا بریم سر اصل مطلب و چگونگی قرار دادن لودینگ در وبلاگ یا صفحات وب :

خوب ابتدا کد زیر رو بردارید و در قالب وبلاگ ( یا کدهای Html صفحه ی مورد نظرتون ) بعد از تگ که در اول قالب هست بزارید .

<> 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; } </> <body> <div id="waitDiv" style="border: 1px dotted silver ; POSITION:absolute;TOP: 90;RIGHT:400;TEXT-ALIGN:center; visibility:hidden; width:211; background-color:#eaeaea" padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px> <tr> <td align="middle"> </td> صفحه در حال بارگذاری است! لطفا کمی صبر کنید... <table cellpadding="6" border="0"> <tr> <td align="middle"> <img alt="Please wait ..." src="http://f-learn.persiangig.com/image/other/wait3.gif" width="91" height="11" border="0" onload="ResetWH(this,470);"> <a target="_blank" href="http://www.free-amozesh.blogsky.com">Loading by : free-amozesh</a> </td> </tr> </table> </div> <> ap_showWaitMessage("waitDiv", 1); </>

همونطور که گفتم بعد از تگ یه اینتر بزنید تا یه سطر باز بشه و بعد کد رو در اون سطر بزارید . مثل زیر :

کد اول رو اینجا بزارید
.......

بعد از اینکه کد بالا رو در جایی که گفتم قرار دادید نوبت به کد دوم میرسه . کد دوم کاربردش اینه که وقتی صفحه کامل لود شد لودینگ بسته بشه پس این کد باید در انتهای قالب و قبل از تگ قرار بگیره .

<> ap_showWaitMessage("waitDiv", 0); </>

کد دوم رو باید بزارید آخره آخره قالبتون ( اگه بزارید قبل از تگ بهتره ) . مثل زیر :

.....
کد دوم رو اینجا بزارید

لازمه اینو بگم: اینکه کد اول رو بعد از تگ بزارید ضروری نیست و میتونید کد اول رو در اوله اوله قالب بزارید .

همچنین اینو : که کد دوم رو قبل از تگ بزارید ضروری نیست و میتونید کد دوم رو در آخره آخره قالب بزارید .

فقط به این خاطر من این جاها رو براشون گفتم که اول و آخر کدها معلوم باشه که مثلا یه قالب با شروع و با تموم میشه .

در ضمن اگر شما می توانید برای لودینگ خود عکس جدید دیگری بگذارید.