Ajax-show loading and bring up a layer occlusion page

As we all know, Ajax requests are asynchronous. This asynchronous mechanism brings us experience optimization, but at the same time, I require us to have a better idea to process a business.

When a user sends an Ajax request, if the request is in the request phase for a long time without giving a user response, the user will be confused, causing the user to think that our system is "unresponsive. In some respects, this is unfriendly.

Sometimes, if you don't see the desired results, you will not stop making requests. This will have unexpected consequences.

Therefore, when sending an Ajax request, we provide some measures to ensure the correct operation of the system and a good user experience.

Here, I am using: show the loading image and bring up a layer so that the user cannot send a request again.

HTML section:

<Div id = "loading" class = "loadingdiv">  </div>

You only need to place one DIV in the HTML part, which contains an IMG.

CSS style:

/* Add a div layer to the image to block the page */. loadingdiv {position: absolute; text-align: center; left: 0px; top: 0px; Z-index: 70; Background-color: #000000; opacity: 0.7; /* transparent # cccccc */display: none;}/* loading image */. loadingdiv IMG {position: absolute; left: 0px; top: 0px; Z-index: 80 ;}

Set the DIV and IMG styles.

JS Code

// During the Ajax request process, the loading image is displayed and the layer is displayed. The request is complete to hide the image $ (function () {// register the Ajax loading event $ ("# loading "). ajaxstart (function () {// a div used to block the page. During the request, the page var lockwin =$ (this) cannot be operated ); // Div occupies the entire page lockwin.css ("width", "100%"); lockwin.css ("display", "Block"); lockwin.css ("height", $ (window ). height () + $ (window ). scrolltop (); // set the image center $ ("# loading IMG" ).css ("display", "Block "); $ ("# loading IMG" ).css ("Left", ($ (window ). width ()-88)/2); $ ("# loading IMG" detail .css ("TOP", ($ (window ). height () + $ (window ). scrolltop ()/2);}); $ ("# loading "). ajaxstop (function () {// hide Div var lockwin = $ (this); lockwin.css ("width", "0"); lockwin.css ("display", "NONE "); lockwin.css ("height", "0"); // sets image hiding $ ("# loading IMG" ).css ("display", "NONE ");});});

JS Code to trigger the event.

So far, we have achieved the following effect: Send an Ajax request, display the loading image, and pop up the layer to overwrite the entire page.

Here I have collected one hundred loading animated images. You can download them if you need them!

Click Open Link

You can email me if you cannot earn any credits! Hey hey.