نمایش لودینگ صفحه قبل از بارگذاری کامل آن Preloader
حتما تا به حال وارد وبسایت هایی شده اید که قبل از بارگذاری کامل صفحه آن یک انیمیشن یا یک نوار در حال پر شدن است تا زمانی که صفحه کاملا لود شود و بعد تصویر محو می‌شود. اگر به دنبال چنین چیزی هستید تا آخر این مقاله قدم به قدم با ما باشید تا نمایش لودینگ صفحه قبل از بارگذاری کامل آن را بررسی کنیم.
دقیقا چه کاری می‌خواهیم انجام دهیم:
ایده کلی این است که ما به محض لود شدن سایت، یک عکس به کاربر نمایش دهیم و به محض اینکه آخرین خط کدهای ما اجرا شد، این عکس را مخفی کنیم.
طراحی نمایش لودینگ صفحه
کدهای زیر را باید به HTML صفحه خود اضافه کنید. اگر طراح سایت هستید و با ASP یا PHP کد می‌زنید می‌توانید آن را در مستر پیج خود قرار دهید. جلوتر در مورد وردپرس هم خواهم گفت که به چه ترتیب عمل کنید.
<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>
- توجه کنید که مسیر عکس به صورت فرضی است و شما باید مسیر عکس Gif خود را جایگزین کنید.
- شما می‌توانید مقدار opacity را از صفر تا ۱ برای تیرگی پس زمینه تغییر دهید.
نمایش لودینگ صفحه در وردپرس
- ابتدا وارد هاست خود شده و فایل header.php را باز کنید و کد زیر را بعد از تگ <body> در آن قرار دهید.
<div class="loader"></div>
- فایل مربوط به استایل قالب را باز کرده و استایل‌های زیر را به آن اضافه کنید.
.loader {
position: fixed;
left: ۰px;
top: ۰px;
width: ۱۰۰%;
height: ۱۰۰%;
z-index: ۹۹۹۹;
background: url('images/page-loader.gif') ۵۰% ۵۰% no-repeat rgb(۲۴۹,۲۴۹,۲۴۹);
}
مخفی کردن عکس بعد از لود شدن سایت
کدهای جاوا اسکریپت زیر را در فوتر قرار دهید:
<script type="text/javascript">
setTimeout(hide, 3000);
function hide(){
document.getElementById('preloader').style.display = "none";
}
</script>
- اگر می‌خواهید بعد از چند ثانیه (مثلاً بعد از ۵ ثانیه) عکس مخفی شود، مقدار setTimeout را تغییر دهید.
- دقت کنید مقدار setTimeout بر حسب میلی ثانیه است.
- در وردپرس، کدهای بالا را نیز در فایل header.php و درست قبل از تگ بسته </head> قرار داده و آن را ذخیره کنید.
این مطلب را از دست ندهید: افکت ()fadeOut در جی کوئری
