no-img
دیزاینر

نمایش تصویر لودینگ پیش از ورود به سایت وردپرس


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

adsads
گزارش خرابی لینک
اطلاعات را وارد کنید .

ادامه مطلب

نمایش تصویر لودینگ پیش از ورود به سایت وردپرس
zip
تیر ۳, ۱۳۹۴

نمایش تصویر لودینگ پیش از ورود به سایت وردپرس


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

آموزش نمایش تصویر لودینگ پیش از ورود به سایت

کد زیر را به فایل استایل قالب وردپرس(style.css) اضافه کنید. این کد آدرس و جایگاه تصویر لودینگ را مشخص می‌کند:

 

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/loading.gif') center center no-repeat #f8f8f8;
}

در این کد تصویر لودینگ در آدرس ” images/loading.gif” سایت فراخوانی شده است. پس یا تصویر مورد نظرتان را در این آدرس ذخیره کنید و یا آدرس را مناسب با محل قرارگیری تصویر لودینگ تغییر دهید.

برای دانلود یک مورد تصویر لودینگ کلیک کنید. 

در مرحله بعد کد زیر را به فایل هدر قالب (header.php) پس از تگ <body> اضافه کنید:

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

پس از آن لارم است جی‌کوئری را فراخوانی کنید. در صورتی که فایل این کتابخانه را پیش‌تر به هاست خود اضافه کرده‌اید آدرس آن را جایگزین آدرس این کد کرده و آن را بین تگ‌های <head> و </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 رفرش کنید.

این تصویر به صورتی ساده در نظر گرفته شد تا صرفا ساختار کدهای “نمایش محتوا قبل از لود سایت” معرفی گردد. شما می‌توانید محتویات تابع <div class=”loader”> را به سلیقه خود ویرایش کرده و تغییر دهید.

موفق باشید!



موضوعات :
آموزش , وردپرس
ads

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

Admin 153 نوشته در دیزاینر دارد . مشاهده تمام نوشته های

دیدگاه ها


دیدگاهتان را بنویسید

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