Ajax display in the load and pop-up layer blocking page implementation Example _ajax related

Objective

Believe that every developer should have some understanding, when the user issued an AJAX request, if the long time in the request phase, and did not give users a response, will give users an illusion, resulting in users think our system "no response." This is a kind of unfriendly in a way.

Even sometimes, users can not see the desired results, will continue to request, this will happen unintended consequences.

Therefore, when the AJAX request, we give some measures to ensure that the system is running correctly and a good user experience.

Here, I'm using to display the picture in the load and pop a layer so that the user cannot make the request again.

Implementation methods

HTML section:

<div id= "Loading" class= "Loadingdiv" > 
     

The HTML section just needs to place a div containing an img.

CSS style:

/* Picture load div layer, used 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; 
  }   
/* Load in picture 
/* loadingdiv img 
{ 
  position:absolute; 
  left:0px; 
  top:0px; 
  z-index:80; 
  

style settings for Div and IMG.

JS Code

In the AJAX request process, display the loaded picture and display the layer, request complete hidden picture 
$ (function () { 
  //Register AJAX Load Event 
  $ ("#loading"). Ajaxstart (function () { 
    //A Div, used to block the page, the request process, the operation of the page 
    var Lockwin = $ (this); 
    Div fills the entire page 
    lockwin.css ("width", "100%"); 
    LOCKWIN.CSS ("Display", "block"); 
    Lockwin.css ("Height", $ (window). Height () + $ (window). scrolltop ()); 
    Set the picture centered 
    $ ("#loading img"). CSS ("Display", "block"); 
    $ ("#loading img"). CSS ("left", ($ (window). Width ()--)/2); 
    $ ("#loading img"). 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"); 
    Set picture hidden 
    $ ("#loading img"). CSS ("display", "none"); 
   

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.