Geek asks and answers

Loading gif freezes while executing code

I am adding an animated gif, which is a loading bar. Gif is defined earlier in the code, and then I just do the following.

document.getElementById("loading").style.display = "inline";
//some if statements.
do_ajax(params);

The ajax call looks something like this ...

    var uri = getURL(params);
    var xhr = new XMLHttpRequest();
    xhr.open("POST",uri,false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    xhr.send(null);

to show gif loading. Then I do some checks (if statements) followed by an AJAX request. However, the gif freezes while this code is executing, and only begins to "move" after the code completes. Why is this? How to fix this problem?

I am using Chrome 11

+3
source share
3 answers

Uses synchronous XHR. This will block the browser, waiting for the request to complete. Obviously, this raises a serious user interface issue.

. open() true. readystatechange .

.

+2

, , async: true

    $("#wait").show(); //SHOW WAIT IMG

     $.ajax({
        url: 'process.php',  //server script to process data
        type: 'POST',
        async: true, // <<<<< MAKE SURE IT TRUE
        data: { data1: "y", data2: "m", data3: "x" },
        complete: function() {
            $("#wait").hide();
        },        

        success: function(result) {
            //do something
        }
    });
+3

load.gif, ajax?

ajax , , , , .

load.gif , :

//--- js code

document.getElementById("loading").style.display = "inline";

//--- js code

var uri = getURL(params);
xmlhttp.open("POST", uri, true);
xmlhttp.onreadystatechange = handleReadyStateChange;
xmlhttp.send(null);
function handleReadyStateChange() {
    if (xmlhttp.readyState == 4) {
        // Request Complete
    }
}
+1

More articles:


All Articles