وبسایتهایی زیادی به این موضوع که با هر بار کلیک کاربر بر روی چیزی بدلیل سنگین بودن فایهای ارسالی از سرور و یا پردازش آن تصویر loadin برای کاربران در سمت کلاینت نمایش داده شود نیاز دارند . اما سایتهای زیادی هستند که اینکار را انجام نداده انمد و کاربر با تصور اینکه کلیک مورد نظر اعمال نشده است بارها و بارها این عمل را تکرار میکنند.در این مقاله یک راه حل کلی برای شما ارائه خواهم داد.
ابتدا یک پروژه از نوع mvc با توجه به شکل زیر ایجاد میکنیم.
اکنون فایل jquery را به برنامه اضافه کنید. سپس یک کنترلر بنام Home و اکشن Index را به آن اضافه نمایید.
در این مرحله ما باید یک صفحه پوشش دهنده (cover page) ایجاد نماییم. برای ایجاد صفحه پوشش دهنده ابتدا یک controller و سپس اکشن index متناظر با انرا ایجاد نمایید و کدهای زیر را به ویوی اکشن مورد نظر اضافه نمایید.
<div id="coverScreen" class="LockOn">
</div>.
کدهای فوق همان صفحه پوشش دهنده (cover page) میباشد.
فایلهای css زیر را برای طراحی Cover Page به برنامه در یک فایل بنام MyCss.cc درج میکنیم.
.LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 105%;
height: 105%;
background-color:white;
vertical-align:bottom;
padding-top: 20%;
filter: alpha(opacity=75);
opacity: 0.75;
font-size:large;
color:blue;
font-style:italic;
font-weight:400;
background-image: url("../Common/loadingGIF.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
فایل MyCss و jquery را به برنامه بیفزایید.
در این مرحله یک پوشه بنام Common در روت پروژه ایجاد میکنیم و تصویر loadingGIF.gif را در آن قرار میدهیم.
یک دکمه با توجه به کد زیر به ویوی متناظر اضافه نمایید.
<input type="button" id="btn" value="کلیک کنید" />
برای مدیریت صفحه جهت بارگزاری و رندر نمودن اطلاعات برای کاربران باید Cover Page ایجاد شده را مدیریت کنیم بنابراین اسکریپتهای زیر را به ویوی اکشن مورد نظر اضافه نمایید.
$(window).on('load', function () {
$("#coverScreen").hide();
});
$("#btn").click(function () {
$("#coverScreen").show();
});
اکنون برنامه را اجرا نمایید.
