When the page loads, let it show the overlay and load the wait picture

When the page loads, let it show the enveloped layer and load wait picture (the result is perfect, the process is very bumpy, so it must be summarized and sorted, spare):

With the Ajax asynchronous, because the JS content can not be displayed immediately, because JS is a single-threaded, to put the queue of the task after the execution of the JS processing just now

To use Beforesend,complete, you have to use Ajax asynchronously.

Beforesend:function () {The},//program executes this function at the beginning, and using the method must use asynchronous Ajax

Complete:function () {},//complete executes after success or error execution

$.ajax ({

Type: "POST",

URL: "",

ContentType: "",

Data:fields,

Beforesend:function () {

var div1 = document.getElementById (' form-submit-loading ');

var div2 = document.getElementById (' Form-submit-overlay ');

Because of the page cache problem, there are some problems loading wait picture duplication, so in this block is judged if these element ID exists directly to let it show just fine, if not present (undefined), then execute the code created

if ((Div1 = = undefined) && (div2 = = undefined)) {

Create code that waits for the picture to be loaded to shroud the layer

var loading = form_submit_overlay_loading ();

var overlay = Form_submit_overlay_f ();

$ (' body '). append (loading); can be the entire page, get the width of the entire page: $ (window). Width (). DIV1 is just a popup ID, which only loads the popup box.

$ (' #Div1 '). append (loading);

$ (' #Div1 '). Append (overlay);

var width = 130;

var height = 80;

var left = ($ (' #Div1 '). Width ()/2)-(WIDTH/2) + $ (document). ScrollLeft ();

var top = ($ (' #Div1 '). Height ()/2)-(HEIGHT/2) + $ (document). ScrollTop ();

$ ("#form-submit-loading"). CSS ("top", Top + "px"). CSS ("left", left + "px"). CSS ("display", ' block ');

$ ("#form-submit-overlay"). CSS ("Display", "block");

}

$ ("#form-submit-loading"). CSS ("Display", "block");

$ ("#form-submit-overlay"). CSS ("Display", "block");

},

This is not used because it is to modify the project is done, the project execution success when the page is pointed to other places, the callback when the page does not exist, so complete will not execute

Complete:function () {

$ ("#form-submit-loading"). CSS ("display", "none");

$ ("#form-submit-overlay"). CSS ("display", "none");

//},

Success:function (msg) {

if (msg! = "Sucees") {

Alert (msg + ", please re-operate");

} else {

Alert ("Operation succeeded");

$ ("#form-submit-loading"). CSS ("display", "none");

$ ("#form-submit-overlay"). CSS ("display", "none");

}

}

Error:function () {

},

The default is false, synchronous; true is asynchronous

Async:true

});

JS is single-threaded, when a function executes, the JS engine will lock the DOM tree, the response code of other events can only wait in the queue, and the page is stuck at this time.

In fact, asynchronous Ajax does use multi-threading, but the HTTP connection part of the AJAX request is executed by a separate thread from the browser, and an event is sent to the JS engine after execution, when the callback code for the asynchronous request executes.

The execution of an HTTP request is in another thread, and because the thread does not manipulate the DOM tree, it is guaranteed to be thread-safe. There is no JS execution in the middle of initiating the AJAX request and callback function, so the page does not get stuck.

When the page loads, let it show the overlay and load the wait picture