Introduction
Showing loading image in the client side whenever a server postback / Background server operation is in progress
Background
I have seen in lots of websites where we have this common need as per our topic in all the sites. That is whenever a user click something in the website it should intimate the user that your request is being processed / some loading image. But there are a number of sites where this problem has not been taken care of and users will have an impression of he has not clicked and will click again and again. Also there will be other buttons also on click of which while other server request is in progress it will result in unexpected error. This article will give you a perfect solution for all these.
Using the code
Suppose we have have page called MyPage.aspx on which we need to implement this waiting message fuctionality.
First of all we need add jQuery reference to the aspx page becasue we are going to use some jQuery function to achieve this.
<head>
<script language="javascript" type="text/javascript" src="../Common/jquery.min.js"></script>
</head>
Here I have made a reference to my jQuery minified file which I have inside my common folder.
Either you can give the cloud reference also as below.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
Then we need to create a cover page class "LockOn" using which we can make a "coverScreen div" entirely above the actual page "MyPage.aspx" (z-index: 999; plays major role) as an overlay.
Then it will be like a transparent cover screen / overlay whcich restrict all the action in the page "MyPage.aspx", but since transparent we can still see the actual page.
We also use loading gif which will in effect loading feel.
Our "LockOn" class will be like as before
`.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;
}
Now we need to create our div with this class which cover entire page as an over lay whenever the page is getting loaded
<div id="coverScreen" class="LockOn">
</div>.
Now we have a poper covering overlay div "CoverScreen". Next step is to control the this covering div when and were required.
For example, the first time when we render the page show this "CoverScreen" div as it is. Once the page completes the loading we need to his this DiV so that user can seen the normal page with all its functionality. we can achieve below jQuery code.
$(window).on('load', function () {
$("#coverScreen").hide();
});
The above solution will be fine whenever the page is loading.
Now suppose I have a print button with Id "#ucNoteGrid_grdViewNotes_ctl01_btnPrint" on click of which an SSRS report is getting loaded and it is taking long time till then we need to intimate user that page is loading. For that we need to show this "Covering Div" in the client click event as shown below
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});
In the above code "ucNoteGrid_grdViewNotes_ctl01_btnPrint" my print button run a asp.net control ID.
That means when we click this print button (which will take long time to give the report) it will show our cover screen with GIF which give [![this][1]][1] result and once page is ready above already windows on load function will fire and which hide the cover screen once the screen is fully loaded.
Our page loading stayle will be as shown below.
