AJAX display loading and the implementation example of layer blocking page is displayed. ajax example

AJAX display loading and the implementation example of layer blocking page is displayed. ajax example

Preface

I believe that every developer should understand that when a user sends an AJAX request, if the user is in the request stage for a long time and does not give a user response, it will create an illusion for the user, as a result, the user thinks 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.

Implementation Method

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 ");});});

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.