جهت ورود به تالار گفتمان سایت کلیک کنید


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

در این پست از سایت اسکریپت دات کام قصد دارم با استفاده از 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 هایی که در حال حاضر قرار دارد , از یک عکس استفاده نمایید تا کاربر قبل از بارگذاری کامل سایت , یک عکس مشاهده نماید . ضمنا میتوانید برای داشتن تصاویر متناسب این کار به این پست مراجعه فرمایید .

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

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

پخش اختصاصی

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

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

4 پاسخ به “آموزش ساخت Loading برای وب سایت با Jquery”

  1. یاهو گفت:

    استاد مجیدی
    سلام
    من با کد زیر اسکرول مرورگر رو در حین لود شدن سایت، حذف کردم.
    $(window).on(“load”,function() {
    $(“#loading”).delay(1000).fadeOut();
    $(‘body’).css(‘overflow’,’hidden’);
    });
    چطور میتونم یه دستور بنویسم که وقتی لود سایت کامل شد، اسکرول مرورگر دوباره ظاهر بشه؟

  2. کاظمی گفت:

    یه سوال برام ایجاد شده

    نمیشه تایم لود شدن رو بیشتر کرد؟؟

    • وحید مجیدی گفت:

      میتونید از .delay استفاده نمایید

      توی فروم بیان کنید

  3. کاظمی گفت:

    سلام
    مرسی اقا وحید

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

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