Ajax is used more and more frequently in Web applications. Generally, this method is used when Ajax is called: displaying a GIF image animation indicates that the background is working and the user is blocked from operating the page (for example, Ajax requests are triggered by a button, you cannot click this button frequently to generate multiple concurrent Ajax requests.) After the call is completed, the image disappears and the current page is re-edited. For example, the page loads data (left) as an Ajax request through a Load link ). After the user clicks the link, the Ajax request starts. The GIF image Displays the "Loading" status and the current page is "covered" to prevent the user from clicking the "Load" button ); after an Ajax request is completed, the returned response results are displayed, while the GIF image and the "mask" disappear (right) at the same time ). [Download the source code from here]
Here, I also use ASP. NET MVC as an example to provide a simple implementation method. Our GIF images and <div> as masks are defined in the layout file, and corresponding CSS is customized for them. The z-index of the GIF and mask <div> are set to 2000 and 1000 respectively (this is arbitrary, as long as the masked <div> can be used to cover the current page, the GIF image is displayed on the top ). The latter sets position, top, bottom, left, and right to cover the entire page and sets the background to black.
1: <!DOCTYPE html>
2:
3:
4: <title>@ViewBag.Title</title>
5: <style type="text/css">
6: .hide{display:none }
7: .progress{z-index: 2000}
8: .mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #000000}
9: </style>
10: ...
11:
12: <body>
13: <div>@RenderBody()</div>
14:
15: <div id="maskOfProgressImage" class="mask hide"></div>
16: </body>
17:
Then, we use the following code to define another Ajax call method ajax2 for jQuery. This method still calls $. ajax (options) for Ajax call. In the ajax2 method, we encapsulate the options parameter complete attribute to hide the GIF image and mask. At the same time, the async attribute of options is overwritten, which is always executed in asynchronous mode, because only in this way can the browser be locked and the GIF can be properly displayed. Before calling $. ajax (options) for Ajax requests, we can display GIF images and masks <div> and locate them in the center. The transparency of the mask <div> is set accordingly, so the effect is displayed.
1: <!DOCTYPE html>
2:
3:
4: ...
5: <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
6: <script type="text/javascript">
7: $(function () {
8: $.ajax2 = function (options) {
9: var img = $("#progressImgage");
10: var mask = $("#maskOfProgressImage");
11: var complete = options.complete;
12: options.complete = function (httpRequest, status) {
13: img.hide();
14: mask.hide();
15: if (complete) {
16: complete(httpRequest, status);
17: }
18: };
19: options.async = true;
20: img.show().css({
21: "position": "fixed",
22: "top": "50%",
23: "left": "50%",
24: "margin-top": function () { return -1 * img.height() / 2; },
25: "margin-left": function () { return -1 * img.width() / 2; }
26: });
27: mask.show().css("opacity", "0.1");
28: $.ajax(options);
29: };
30: });
31: </script>
32:
33: ...
34:
Now, you only need to call $. ajax2 when calling Ajax. The following shows the registration code for the click event linked to "Load" in the instance:
1: <a href="#" id="load">Load</a>
2: <div id="result"></div>
3: <script type="text/javascript">
4: $("#load").click(function () {
5: $.ajax2 ({
6: url: '@Url.Action("GetContacts")',
7: success: function(result)
8: {
9: $("#result").html(result);
10: }
11: });
12: });
13: </script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
