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

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

در این آموزش به شما می آموزیم که چگونه با استفاده از jQuery و CSS یک تصویر متحرک را قبل از بارگذاری کامل صفحه به کاربران نمایش دهید ، در ادامه مطلب همراه ما باشید .

همانطور که به شما قول داده بودیم ، هفت تصویر متحرک آماده با طراحی مدرن را برای شما گرد آوری کرده ایم که می توانید بنا بر سلیقه خود از آن ها استفاده کنید .

 

دموی تصاویر را می توانید در زیر ببینید ، تصاویر موجود در بسته با سه سایز متفاوت ارائه شده اند :

Preloader_1

Preloader_2

Preloader_3

Preloader_4

Preloader_5

Preloader_6

برای این کار مراحل زیر را دنبال کنید :

۱- کد زیر را بلا فاصله بعد از تگ <body> قالب اضافه کنید :

<div class="se-pre-con"></div>

۲- حالا با استفاده از CSS آیکون مورد نظر را نمایش داده و آن را در وسط صفحه قرار می دهیم ، کد زیر را به یکی از فایل های CSS قالب اضافه کنید :

/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}

۳- حال با استفاده از jQuery زمان نمایش آیکون و زمان محو شدن آن را مشخص می کنیم :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>

//paste this code under head tag or in a seperate js file.
	// Wait for window load
	$(window).load(function() {
		// Animate loader off screen
		$(".se-pre-con").fadeOut("slow");;
	});

تمام شد ! حالا کافی است صفحه را یک بار بارگذاری کنید تا لودینگ جذاب اضافه شده را مشاهده کنید ، در فایل ارائه شده ۷ تصویر متحرک وجود دارد ، اگر این تصاویر نیاز شما را برآورده نمی کنند می توانید از سایت های زیر استفاده کنید و  تصویر مورد نظرتان را پیدا کرده و یا خودتان بسازید :

preloaders.net
loadergenerator.com

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

1 پاسخ

دیدگاه خود را ثبت کنید

مطلب خاصی فکرتان را مشغول کرده است ؟
آن را با ما در میان بگذارید !

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

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