1:Body-level mask. Load the entire page with loading... effect!
2.: Div-level mask, specific to a div's loading... effect!
The HTML code is as 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"AjaxThe article gave me an idea, but it still did not reach the purpose I wanted. So I thought about making it universal, solving this intractable problem at one time, and changing it once and for all, now it's general!
/****** Rewrite the Ajax operation to make it a general loading operation *******/$. ajax2 = function (options, aimdiv) {var IMG = $ (" "); // loading small icon 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 if (aimdiv! = NULL & aimdiv! = "" & Aimdiv! = Undefined) {comment (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:
// Page Div loading effect $ ("# Load"). Click (function () {$. ajax2 ({URL: '@ URL. Action ("Index ")? '+ New date (). totimestring (), success: function (result) {$ ("# result" ).html (result) ;}, "# TB ");}); // The loading effect of the entire page $ ("# Load "). click (function () {$. ajax2 ({URL: '@ URL. action ("Index ")? '+ New date (). totimestring (), success: function (result) {$ ("# result" ).html (result );}});});
Conclusion: I hope to give you some inspiration. Good things should be shared. I am very happy!