شاید دیده باشین که برخی از سایت ها بیشتر به منظور زیبایی وبسایت خود صفحه بارگیری یا همان Loading را قبل از صفحه اول وبسایت خود به نمایش می گذارند.

 

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

 loading1

یک نمونه عکس بارگیری در قالب gif (برای نمایش در حالت gif روی عکس کلیک کنید)

برای این کار به پوشه پوسته خودتون برید و فایل header.php رو با یه نرم افزار ویرایشگر مثل Sublime یا Notepad++ باز کنید و کد زیر رو بعد از تگ <body> قرار دهید.

 

<div class="loader"></div>

 

حالا کد زیر رو به فایل style.css اضافه کنید.

.loader {

           position: fixed;

           left: 0px;

           top: 0px;

           width: 100%;

           height: 100%;

           z-index: 9999;

           background: url(‘filex/loader.gif’) center center no-repeat #f8f8f8;

}

 

نکته : filex/loader.gif آدرس عکس بارگیری شما می باشد.

 

بعد از اینکه آدرس فایل gif رو بهش دادید قبل از تگ <head/> کد زیر رو قرار دهید.

 

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

 

بعد کد زیر رو قرار دهید.

 

<script type=”text/javascript”>

$(window).load(function() {

                $(“.loader”).fadeOut(“slow”);

})

</script>

فایل ها رو ذخیره کنید و سایت خودتون رو دوباره بارگیری کنید.
میتونید از دکمه ctrl+f5 استفاده کنید تا تصویر بارگیری رو ببینید.

 

موفق باشید.

منبع : مدرسه وردپرس

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *