دوشنبه ۲۶ خرداد ۱۴۰۴ |  عضویت / ورود

آموزش قرار دادن لودینگ (Preloader) برای سایت یا وبلاگ


Tuesday, 2012 June 19   نویسنده: Hamid   تعداد بازدید: 14597 بار  #آموزش جاوا اسکریپت - Java Script‏   امتیاز متوسط: امتیازی داده نشده است

احتمالاً بارها وارد یک سایت شده‌اید و دیده‌اید که به محض ورود، تا زمانی که کل سایت بارگزاری شود، یک عکس چرخان و یا یک نوار که در حال پر شدن است، نمایش داده می‌شود، اگر می‌خواهید بدانید چطور این کار را در مورد سایت یا وبلاگ خودتان انجام دهید، این آموزش را دنبال کنید.

ابتدا صفحه زیر را ببینید:

http://tutorials.aftab.cc/web_designing/javascript/preloader

خواهید دید که به محض ورود، این عکس:

http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader.gif

نمایش داده می‌شود و بعد از مدتی مخفی می‌شود.

البته چون صفحه ما طولانی نبود، خودمان تنظیم کرده‌ایم که بعد از 3 ثانیه آن عکس مخفی شود، اما کدی که در قسمت اول آموزش به شما ارائه می‌کنیم، بعد از لود شدن سایت، عکس را مخفی خواهد کرد.

ایده کلی:

ایده کلی این است که ما به محض لود شدن سایت، یک عکس به کاربر نمایش دهیم و به محض اینکه آخرین خط کدهای ما اجرا شد، این عکس را مخفی کنیم.

مخفی کردن عکس بعد از لود شدن سایت:

گام اول: در بین کدهای صفحه مورد نظرتان، تگ را پیدا کنید. دقیقاً بعد از آن، کد زیر را قرار دهید:

<div id="preloader" style="width:100px; position:fixed; left:50%; margin-left:-50px; top:200px;
display:block; text-align:center; font-family:Tahoma; font-size:9pt; direction:rtl;">
        <img src="img/preloader.gif" /><br/>
        لطفاً منتظر بمانید...
div>

توجه کنید که عکس بالا را باید ذخیره کنید و به نام preloader در پوشه‌ای به نام img در کنار صفحه مورد نظرتان قرار دهید و یا اینکه هر کجا که خواستید قرار دهید، فقط آدرسی که در کد بالا قرمز شده است را به آدرس عکس تغییر دهید.

 

گام دوم: تگ ‎‎ را د بین کدهای صفحه خود پیدا کنید. (تقریباً انتهای کدهای صفحه می‌شود. یعنی یک خط مانده به آخر). این کدها را قبل از ‎‎ قرار دهید:

<script type="text/javascript">
    document.getElementById('preloader').style.display = "none";
</script>

 این کد در حقیقت عکس بالا را مخفی می‌کند.

 

همین!

 

توضیحاتی برای حرفه‌ای‌ها:

1- اگر می‌خواهید یک صفحه سیاه با شفافیت کم، صفحه را غیرقابل کلیک کند (در اصطلاح صفحه را dim کند) مثل این صفحه:

http://tutorials.aftab.cc/web_designing/javascript/preloader/index2.html

به جای کد گام اول، از این کد استفاده کنید:

<div id="preloader" style="width:100px; position:fixed; left:50%; margin-left:-50px; top:200px;
display:block; text-align:center; font-family:Tahoma; font-size:9pt; direction:rtl;">
        <div style="position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:black; opacity:0.7;z-index:1000;">div>
        <div style="position:fixed; z-index:1001">
            <img src="img/preloader.gif" /><br/>
            لطفاً منتظر بمانید...
        div>
div>

 

 

2- اگر می‌خواهید بعد از چند ثانیه (مثلاً بعد از 5 ثانیه) عکس مخفی شود، وارد صفحه بالا یعنی این صفحه:

http://tutorials.aftab.cc/web_designing/javascript/preloader/index2.html

شوید و از منوی View گزینه Page Source را انتخاب کنید (یا کلیدهای Ctrl+U را فشار دهید) و کدهای جاوا اسکریپت که در انتهای صفحه آمده است را تحلیل کنید...

در حقیقت باید به جای کد گام دوم، این کد را قرار دهید:

<script type="text/javascript">
    setTimeout(hide, 3000);
        
    function hide(){
        document.getElementById('preloader').style.display = "none";
    }
</script>

3- به جای عکس لودینگ در بالا، می‌توانید از این عکس‌ها هم استفاده کنید:

http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader1.gif

http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader2.gif

http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader3.gif

http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader4.gif

http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader5.gif

http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader6.gif

http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader7.gif

http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader8.gif

http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader9.gif

 

موفق باشید؛
حمید رضا نیرومند

http://tutorials.aftab.cc/web_designing/javascript/preloader/img/preloader2.gif

کلمات کلیدی: آموزش javascript, کدهای آماده جاوا اسکریپت, ابزارهای جاوا اسکریپت, javascript برای سایت و وبلاگ, ابزار بارگزاری برای صفحه سایت, ابزار load برای وبلاگ, مخفی کردن عکس بعد از لود شدن سایت, ترفندهای javascript, جلوگیری از کلیک در صفحه


.


ارسال سؤال یا نظر

1- مینو رسوخی :
بوسیله: , در: Wednesday, 2012 June 20-کد: 4474
ممنون بسیار عالی و واضح

2- مصطفی روستایی:
بوسیله: , در: Wednesday, 2012 October 10-کد: 5044
بسیار کاربردی و زیبا بود
ممنون

3- كاربر:
بوسیله: , در: Monday, 2012 October 29-کد: 5190
سلام
كلا سايت مفيد علمي خوبي داريد.
تشكر مي كنم

4- فرزاد:
بوسیله: , در: Sunday, 2014 January 26-کد: 9334
دستت درد نکنه. خیلی عالی بود.

5- حسین:
بوسیله: , در: Wednesday, 2019 March 06-کد: 15960
خیلی ممنون کارم رو راه انداخت

6- منصوری:
بوسیله: , در: Wednesday, 2021 April 14-کد: 16565
کد لودینگی که گذاشته بودین فوقالعاده عالی و توضیحات بسیار مناسب بود مرسی واقعا دمتون گرم

7- سعید:
بوسیله: , در: Tuesday, 2021 July 06-کد: 16589
سلام یه کد هست برای اضافه کردن لودینگ به سایت این از سایت rnhttps://codepen.io/martinvd/embed/xbQJom?height=600&default-tab=result&embed-version=2#result-boxrnهست html رو توی header.php اضافه کردم و css رو تو style.css اضافه کردم بازم نشد

Tutorials ©