صفحه در حال بارگذاری می باشد. لطفا صبر کنید...
بارگذاری
Soomar63
نام کامل:امیر حسینی,نام مستعار:Soomar63.آدرس سایت:www.soomar63.com.محل زندگی:ایران,البرز,3143664991.حرفه:طراحی سایت در:شرکت همگام رایانه سومار.همکاران:White World

سلام میهمان گرامی؛ برای دسترسی به تمامی امکانات؛ لطفا در سایت عضو شده و با نام کاربری خود وارد شوید. قبل از عضویت در سایت؛ توافقنامه سومار را مطالعه نمایید.

X

خدمات سومار

امتیاز:  ستارهستارهستارهستارهستاره / 6
ضعیفعالی 
مطلب ویژه
تاریخ ایجاد در 13 آبان 1391 نوشته شده توسط امیر حسینی
مجموعه: آموزش > افزایش قابلیت
نمایش از 13 آبان 1391 بازدید: 5130
پرينت
اندازه قلم: کوچکتر . پیشفرض . بزرگتر

دسته بندی: PreLoading | افزایش قابلیت | لودینگ سایت

Loadingمعرفی:

یکی از قابلیت های بسیار خوبی که می توانید به عنوان یک طراح سایت به سایت های خود اضافه نمایید، لودینگ اولیه یا همان Preloading یا Preloader است. این همان چیزی است که در ابتدای اجرای سایت سومار هم می بینید.

در این آموزش قصد داریم چیزی شبیه به آنچه در سایت سومار می بینید ایجاد نماییم:

لودینگ سایت سومار سه قسمت دارد:

1- متنی که توضیح می دهد سایت در حال بارگذاری می باشد.

2- تصویری که با چرخش خود بارگذاری سایت را نمایش می دهد.

3- لینکی که پس از چند ثانیه نمایش داده می شود و در صورت لود نشدن صحیح صفحه به شما امکان اجرای مجدد صفحه را می دهد.

خوب برای ایجاد چنین لودینگی مراحل زیر را به ترتیب انجام دهید:

ابتدا به یک تصویر متحرک نیاز دارید. می توانید به سایت preloaders.net سری بزنید و یکی را انتخاب کنید. یا سایت های مشابه را پیدا کنید. حتی می توانید یکی را خودتان طراحی کنید. به خاطر داشته باشید که تصاویر لودینگ معمولا تصاویر متحرک با فرمت gif. هستند.

پس از اینکه تصویر لودینگ سایت خود را دریافت کردید آنرا در هاست خود مثلا در پوشه images ذخیره کنید.

حال باید یک کد جاوا اسکریپت را در قسمت head سایت خود کپی نمایید:

  1. <script type="text/javascript" language="javascript">
  2. function waitPreloadPage() {
  3. if (document.getElementById) {
  4. document.getElementById('prepage').style.visibility='hidden' }
  5. else {
  6. if (document.layers){document.prepage.visibility = 'hidden' }
  7. else {
  8. document.all.prepage.style.visibility = 'hidden' }}}
  9. </script>

و کد زیر را نیز دقیقا جایگزین تگ body سایت خود نمایید:

  1. <body onload="waitPreloadPage();">
  2. <div id="prepage" style="position:fixed;right:0px;top:0px;background-color:#abc;height:100%;width:100%;z-index:9999999;">
  3. <div style="text-align:center;color:#000;margin-top:205px;">
  4. صفحه در حال بارگذاری می باشد. لطفا صبر کنید...
  5. <br />
  6. <img src="http://www.site.com/images/loading.gif" alt="بارگذاری" title="بارگذاری" width="128px" height="128px" /><br />
  7. <div style="width:120px;margin:0 auto;">
  8. <a title="بارگذاری مجدد" id="Refresh" style="display:none;text-decoration:none;color:#00f;" href="http://www.site.com">بارگذاری مجدد</a>
  9. </div>
  10. <script type="text/javascript" language="javascript">
  11. function show(id){document.getElementById(id).style.display='block'}
  12. setTimeout("show('Refresh')",5000);
  13. </script>
  14. </div>
  15. </div>

همین! کار انجام شد. به همین سادگی می توانید لودینگ های زیبایی برای سایت خود ایجاد نمایید.

در صورتی که به زبان HTML و CSS آشنایی دارید می توانید با تغییر در این کدها، آنها را بسیار زیباتر کرده و برای خود شخصی سازی نمایید.

برای مشاهده ادامه مطلب لطفا وارد شوید و یا ثبت نام کنید.
آخرین به روز رسانی شنبه, 13 آبان 1391 22:18
  • Redswirl

    پگاه آرام

    تاریخ: 12 دی 1392

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

  • Avatar 2013 12 25 2

    بهزاد آزاد

    تاریخ: 09 دی 1392

    مسعود جان اینکه افزونه نیست! آموزشه.
    بعدشم ما سومارو با همین لودینگش هم دوست داریما Emoticon Laughing
    بعدشم اگه سرعت سایت خوب باشه و دو ساعت نخوای به اون لودینگه زول بزنی خوب خوبه دیگه. اگه لودینگ فقط دو سه ثانیه ای طول بکشه اشکالی نداره که. Emoticon Wondering

  • Default Avatar

    مسعود ف

    تاریخ: 08 دی 1392

    افزونه خوبی هست .ایا به نظرتون باعث کاربر گریزی نمیشه .یعنی اینکه اگه کاربری عجله داشته باشه .. و کارهای که کاربر رو اذیت کنه باعث گریز اون نمیشه

  • Avatar 2012 12 26

    سید امیر حسینی

    تاریخ: 17 آبان 1391

    سلام آندرومدای عزیز. مرسی که مطالب سایت رو می خونید.
    استفاده از کد ها خیلی آسون هست. از یک کد جاوا اسکریپت استفاده کردم که باعث میشه وقتی روی متن کد ها کلیک می کنید کل کد به حالت انتخاب درمیاد. می تونید با کلید های Ctrl + C متن رو کپی کنید و هرجا خواستید استفاده کنید. البته کدی که استفاده کردم تو فایرفاکس و اکسپلورر کار نمی کنه. فایرفاکس به خاطر امنیت کلا امکان کپی کردن متن به حافظه رو دیگه پشتیبانی نمی کنه. می تونید خیلی راحت از کروم، اپرا و یا سفری و هر مرورگر دیگه ای استفاده کنید. موفق باشید.

  • Avatar 2013 06 12

    آندرومدا

    تاریخ: 17 آبان 1391

    سلام آقای سید امیرخان
    این مطلب شما خیلی خوبه ولی یه مشکلی که هست اینه که اگه کسی بخواد از کد شما استفاده کنه با این پلاگینی که روی سومار نصبه و نمی ذاره کپی کنه ،باید مرارته و مشقتها همی کشد، کدها را همی نویسد، سرانجام خطا بیند.سرافکنده و حیران و گریان و پشیمان گردد. چه کند؟

برای درج نظر لطفا وارد شوید و یا ثبت نام کنید.

آخرین افزونه های بروزرسانی شده

پلاگین افزودن Google Analytics به سایت جوملا (تاریخ: 1392/12/06 توضیح: نسخه 4.1 جوملا 2.5 و 3.0 - انگلیسی)
کامپوننت ایجاد و مدیریت نقشه سایت Xmap (تاریخ: 1392/10/25 توضیح: نسخه 2.3.4 جوملا 2.5 و 3.0 - انگلیسی)
مدیریت کامل فایل ها در جوملا با کامپوننت eXtplorer (تاریخ: 1392/10/25 توضیح: نسخه 2.1.5 جوملا 2.5 و 3.0 - انگلیسی)
کامپوننت مرکز دانلود حرفه ای Phoca Download (تاریخ: 1392/10/25 توضیح: نسخه 3.0.3 جوملا 3.0 - انگلیسی)
کامپوننت مرکز دانلود حرفه ای Phoca Download (تاریخ: 1392/10/25 توضیح: نسخه 2.1.9 جوملا 2.5 - انگلیسی)
دوشنبه 07:50

تبلیغات

جستجو

آمار محتوا

شمار بازدید صفحات

امروز141
دیروز289
هفته جاری1006
ماه جاری9286
کل بازدیدها1432445

افراد برخط

20 مهمان و 0 عضو آنلاین

اعضاء فعال اخیر

اطلاعات

سه شنبه 28 دی 1395
تعداد اعضاء: 4426
تعداد مطالب: 167
وب لینک ها: 17
بازدید مطالب: 1276180
شناسه: 54.205.111.118
نام مرورگر: سایر مرورگرها
نسخه مرورگر: ؟
سیستم عامل: سایر سیستم عامل ها

سرعت بارگذاری صفحه

زمان بارگذاری: 0.34 ثانیه

دریافت آخرین نسخه جوملا

دریافت آخرین نسخه پایدار جوملاآخرین نسخه پایدار جوملا 1.0آخرین نسخه پایدار جوملا 1.5آخرین نسخه پایدار جوملا 1.6آخرین نسخه پایدار جوملا 1.7آخرین نسخه پایدار جوملا 2.5آخرین نسخه پایدار جوملا 3.1
مسیر:  
Offline: soomar63[at]ymail.com
صفحه اصلی Arrow Rtl آموزش Arrow Rtl افزایش قابلیت Arrow Rtl افزودن لودینگ به سایت
عضویت در سایت

نکات کاربردی سایت

ورود به بخش اعضاء

برای ورود به بخش اعضاء سایت، لطفا از منوی بالا گزینه پنل کاربری را انتخاب نمایید. پنل کاربری


نحوه دریافت افزونه ها

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


فعالیت و کسب امتیاز و درآمد در سومار

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


آخرین نظرات کاربران

سهیل سلطاانیان:  (در تاریخ: 23 دی 1395 برای مطلب: نکات کاربردی سایت)
سلام من تازه وارد سایت شده ام چطور بیشتر بار این سایت آشنا شوم با تشکر از مدیر سایت فک کنم :laugh:سایت خوبیه
مشاهده مطلب: نکات کاربردی سایت

مهسان علیزاده:  (در تاریخ: 15 دی 1395 برای مطلب: مدیریت کامل فایل ها در جوملا با کامپوننت eXtplorer)
سلام خسته نباشید من میخواستم سایتم قابلیت آپلود و دانلود داشته باشه حالا میخواستم که ببینم این افزونه Explorer که برای آپلود هست تنظیماتش بعد از نصب به چه صورته
مشاهده مطلب: مدیریت کامل فایل ها در جوملا با کامپوننت eXtplorer

هادی عبداللهی:  (در تاریخ: 05 مهر 1395 برای مطلب: پلاگین جوملا: بهینه سازی و افزایش سرعت جوملا با JCH Optimize)
سلام وقتی ازش استفاده میکنم سایتم کلا بهم میریزه:( میشه درستش کرد؟
مشاهده مطلب: پلاگین جوملا: بهینه سازی و افزایش سرعت جوملا با JCH Optimize

شاین سومار:  (در تاریخ: 06 شهریور 1395 برای مطلب: ماژول جستجوی آژاکسی PixSearch Ajax Search)
جناب این ماژول کلا مشکل داره هیچ چیزی چک نمیکنه و برای نمایش همه موارد هم صفحه رو رفرش میکنه که با اجاکس جور در نمیادالبته کد اصلی رو هم اصلاح کنید که بتونه فایل helper رو بخونه لطفا اگر وقت گذاشتید و تصحیح کردید اطلاع رسانی کنید ممنون
مشاهده مطلب: ماژول جستجوی آژاکسی PixSearch Ajax Search

احسان اسکندری:  (در تاریخ: 16 بهمن 1394 برای مطلب: پلاگین افزودن Google Analytics به سایت جوملا)
بسیاربسيار عالي بود ، ممنون بابت به اشتراک گذاري
مشاهده مطلب: پلاگین افزودن Google Analytics به سایت جوملا