Original, let your "ajax" request turn around and add the loading mask to "body" or "Div!

1:BodyLevel mask, entire pageLoad ........Effect!

2.:DivLevel mask, specific to a divLoad ........Effect!

HtmlCodeAs follows:

 
<A href = "#" id = "LOAD"> load </a> <Div id = "TB"> <Div id = "result"> </div> </ div>
 

 

In this project, I discovered this problem,AjaxThe request is too monotonous.AjaxManually setLoadingThe small image is hidden after loading, and such code is repeatedly written every time, which is too much trouble. Until I read"Uncle Jiang"AjaxArticle, Gave me an idea, but it still did not reach the purpose I want, so I want to make a general purpose, one-time solution to this intractable disease, once and for all, and changed it myself, now it's general!

   /*  * ***** Rewrite the Ajax operation to make it a general loading operation ******  */  $. Ajaxloading = Function (options, aimdiv ){  VaR IMG = $ ( "   " ); //  Loading icons              VaR Mask = $ ( "  <Div id = \ "maskofprogressimage \"> </div>  " ). Addclass ( "  Mask  " ). Addclass ( "  Hide  " );//  Div mask              VaR Positionstyle = "  Fixed  "  ;  //  Whether to fix loading in aimdiv. Otherwise, the full screen loading mask is used by default.              If (Aimdiv! = Null & Aimdiv! = "" & Aimdiv! = Undefined) {detail (aimdiv).css (  " Position  " , "  Relative  "  ). Append (IMG). append (mask); positionstyle = "  Absolute  "  ;}  Else  {$ (  "  Body  " ). Append (IMG). append (mask);} img.css ({  "  Z-Index  " : "  2000  "  ,  "  Display  " : "  None  "  }) Mask.css ({ "  Position  "  : Positionstyle,  "  Top  " : "  0  "  ,  "  Right  " : "  0  " ,  "  Bottom  " : "  0  "  ,  "  Left  " : "  0  "  ,  "  Z-Index " : "  1000  "  ,  "  Background-color  " : "  #000000  "  ,  "  Display  " : " None  "  });  VaR Complete = Options. Complete; options. Complete = Function (httprequest, status) {IMG. Hide (); mask. Hide ();  If  (Complete) {complete (httprequest, status) ;}}; options.  Async = True  ; Img.show().css ({ "  Position  "  : Positionstyle,  "  Top  " : "  40%  "  ,  "  Left  " : "  50%  " ,  "  Margin-top  " : Function (){ Return - 1 * IMG. Height ()/ 2  ;},  "  Margin-left  " : Function (){ Return - 1 * IMG. Width ()/ 2 ;}}); Mask.show().css (  "  Opacity  " , "  0.1  "  ); $. Ajax (options );}; 

The call is as follows:

 
$ ("# Load"). Click (function () {$. ajaxloading ({URL: '@ URL. Action ("Index ")? '+ New date (). totimestring (), success: function (result) {$ ("# result" ).html (result) ;}, "# TB ");});
 

 

 

After finishing the work, if you think your younger brother is okay, please give me a comment, even if it is "like!