آموزش ساخت Loading برای وب سایت با Jquery
در این پست از سایت اسکریپت دات کام قصد دارم با استفاده از jQuery یک loading برای وب سایت را آموزش بدم . این کار باعث میشود تا قبل از اینکه سایت به صورت کامل لود شود , یک عکس یا یک نوشته در صفحه ظاهر شود و اطلاع دهنده این باشد که سایت در حال لود می باشد یا مثلا لطفا صبر کنید …
گرچه این کار خیلی هم خوب نیست . به این دلیل که اگر سرعت اینترنت کاربر پایین باشد , مجبور میشود لحظات زیادی را برای لود سایت و از بین رفتن صفحه loading منتظر بماند که حتا در بعضی از مواقع موجب بیرون رفتن کاربر از سایت میشود .
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 هایی که در حال حاضر قرار دارد , از یک عکس استفاده نمایید تا کاربر قبل از بارگذاری کامل سایت , یک عکس مشاهده نماید . ضمنا میتوانید برای داشتن تصاویر متناسب این کار به این پست مراجعه فرمایید .
پخش اختصاصی
گرداوری و آموزش : وحید مجیدی
استاد مجیدی
سلام
من با کد زیر اسکرول مرورگر رو در حین لود شدن سایت، حذف کردم.
$(window).on(“load”,function() {
$(“#loading”).delay(1000).fadeOut();
$(‘body’).css(‘overflow’,’hidden’);
});
چطور میتونم یه دستور بنویسم که وقتی لود سایت کامل شد، اسکرول مرورگر دوباره ظاهر بشه؟
یه سوال برام ایجاد شده
نمیشه تایم لود شدن رو بیشتر کرد؟؟
میتونید از .delay استفاده نمایید
توی فروم بیان کنید
سلام
مرسی اقا وحید