Loading Gif "freezes" When Code Is Executing

I'm appending an animated gif which is a loading bar. The gif is defined earlier in the code and I then just do the following.. document.getElementById('loading').style.display = '

Solution 1:

You are using synchronous XHR. This will lock the browser whilst waiting for the request to finish. Obviously, it causes a serious UI issue.

Try asynchronous. Set open()'s 3rd parameter to true. You also need to assign the readystatechange event and listen for success.

Further Reading.

Solution 2:

I guess just make sure you are using async: true

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

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

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

Solution 3:

Are you expecting to see the loading.gif while your synchronous ajax request is running?

Synchronous ajax requests completely lock up the UI of most browsers, preventing any changes you make from being displayed until the request completes.

If you want to see loading.gif while the request is running, make it asynchronous:

//--- js code

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

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