آموزش قرار دادن لودینگ سایت - طراحی سایت | ساخت سایت | قالب وردپرس

آموزش قرار دادن لودینگ سایت

۲ خرداد ۱۳۹۲
2198 بازدید
فاقددیدگاه
loading1

بعضی اوقات وبسایتی را طراحی می کنیم که کمی سنگین است و مدت زمانی جهت بارگزاری کامل آن صرف می شود  و تا قبل از لود کامل سایت ، عناصر آن بهم ریخته هستد.حال اگر بخواهیم کاری کنیم که تا قبل از بارگزاری کامل سایت از دیدن آن جلوگیری کنیم باید از اسکریپت لودینگ استفاده نمائیم. برای اینکار ابتدا بلا فاصله بعد از تگ body این تگ ها را قرار می دهیم:

<div id="loading">
<img id="loading-image" src="<?php bloginfo( 'stylesheet_directory' );?>/images/loading.gif" alt="Loading..." />
</div>

در ادامه یک فایل loading.gif که همان تصویر لودینگ سایت می باشد را در پوشه images قالب خود کپی می کنیم و سپس یک استایل هم به روش زیر به آن می دهیم:

#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 1;
background-color: #ffffff;
text-align: center;
z-index: 1111111111;
}

#loading-image {
position: fixed;
top: 50%;
left: 50%;
z-index: 11111111111;
}

کار آخر و مهمتر از همه اسکریپت آن است که به صورت زیر در هدر سایت قرار می دهیم:

<script type="text/javascript" >
$(window).load(function() {
$('#loading').hide();
});
</script>

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

امتیاز:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...
اشتراک گذاری:
مطالب مرتبط
دیدگاه شما