تبلیغ جدید خرید هاست ارزان
  • 1,877 بازدید
  • بدون نظر

 لود صفحه قبل از بارگذاری کامل آن

 

با سلام خدمت دوستان عزیز وردپرسی!

 

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

 

لود صفحه قبل از بارگذاری کامل آن

 

برای شروع کار ابتدا وارد هاست خود شده و فایل 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(۲۴۹,۲۴۹,۲۴۹);
}

 

و در نهایت کدهای جی‌کوئری زیر را نیز در فایل header.php و درست قبل از تگ </head> قرار داده و آن را ذخیره کنید.

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/۱.۹.۱/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>

 

پس از اینکه تمامی مراحل را به درستی وارد کردید لازم است تا تصویر مورد نظر را که با نام page-loader.gif و در مسیر images قرار دارد را نیز آپلود کنید. که در کدهای css آن را قرار دادیم. و میتوانید از باکس دانلود آن را دریافت کنید.

 

شاد باشید… 🙂

Avatar

درباره نویسنده : Mahdi

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

مطالب بیشتر از همین نویسنده