طراحي وب – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Wed, 05 Aug 2015 20:39:06 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 آموزش ساخت Loading برای وب سایت با Jquery https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-loading-%d8%a8%d8%b1%d8%a7%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d8%a7-jquery.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-loading-%d8%a8%d8%b1%d8%a7%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d8%a7-jquery.html#comments Sat, 01 Aug 2015 18:23:21 +0000 http://www.xn--mgbguh09aqiwi.com/?p=10174 در این پست از سایت اسکریپت دات کام قصد دارم با استفاده از jQuery یک loading برای وب سایت را آموزش بدم . این کار باعث میشود تا قبل از اینکه سایت به صورت کامل لود شود , یک عکس یا یک نوشته در صفحه ظاهر شود و اطلاع دهنده این باشد که سایت در حال لود می باشد یا مثلا لطفا صبر کنید …

گرچه این کار خیلی هم خوب نیست . به این دلیل که اگر سرعت اینترنت کاربر پایین باشد , مجبور میشود لحظات زیادی را برای لود سایت و از بین رفتن صفحه loading منتظر بماند که حتا در بعضی از مواقع موجب بیرون رفتن کاربر از سایت میشود .

آموزش ساخت Loading برای وب سایت با Jquery

 1 – برای این کار ابتدا باید باید آخرین نسخه کتابخانه jquery را از اینجا دانلود نموده و به سایت خود اضافه نمایید .

برای لینک کردن یک فایل جی کوئری به سایت , میبایست از کد زیر در داخل تگ head استفاده نموده :

<script src="آدرس فایل جی کوئری" type="text/javascript" language="javascript"></script>

2 – حال باید کد زیر را در قالب سایت خود کپی کنید . ( ترجیحا قبل از بسته شدن تگ <body/> )

<script type="text/javascript">
$(window).load(function(){  
      $("#vmsLoading,#vmsLoadingBack").fadeOut();  
})  
</script>

3 – حالا باید کد های زیر را در html و css خود قرار دهید :

3-1 : این کد باید در html شما و حتما بعد از باز شدن تگ <body> قرار گیرد .

<div id="vmsLoadingBack">
    <div id="vmsLoading">
        <h3>در حال بارگذاری </h3>
        <h4>لطفا صبر کنید ...</h4>
    </div>
</div>

3-2 : این کد هم باید در css خود قرار دهید .

#vmsLoadingBack{
	position:fixed;
	background-color:rgba(0,0,0,0.8);
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	width:100%;
	height:100%;
        z-index:1001;   
}
#vmsLoading {  
	position:absolute;  
	width:300px; 
	height:auto; 
	top:30px;  
	left:50%;  
	margin-left:-150px;  
	text-align:center;  
	padding:10px; 
	box-sizing:border-box;
	background-color:#fff;
	border-radius:3px;
	direction:rtl;
	font-family:tahoma;
	font-size:13px;
        z-index:1002;
}

 

نکته مهم  1 : اگر میخواهید این عمل برای تمامی صفحات سایت انجام شود , طبیعتا باید در تمامی صفحات کپی نمایید یا مثلا اگر از وردپرس استفاده میکنید کار شما آسان تر میشود و فقط کافیست در فایل footer.php قالب خود کپی نمایید تا در تمامی صفحات انجام شود .

نکته مهم  2 : در داخل div با آی دی vmsLoading شما میتوانید از تگ های دیگری استفاده نمایید . یعنی مثلا به جای h3 و h4 هایی که در حال حاضر قرار دارد , از یک عکس استفاده نمایید تا کاربر قبل از بارگذاری کامل سایت , یک عکس مشاهده نماید . ضمنا میتوانید برای داشتن تصاویر متناسب این کار به این پست مراجعه فرمایید .

دموی آماده آموزش

دانلود فایل آماده آموزش

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-loading-%d8%a8%d8%b1%d8%a7%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d8%a7-jquery.html/feed 4