代码执行时，加载动画“卡住”了

Question

我正在添加一个动画GIF，它是一个加载条。该GIF在代码中早先定义，然后我只需执行以下操作...

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

该Ajax调用看起来像是...

    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);

显示加载动画。然后我执行一些检查(if语句)，紧接着就是一个 AJAX 请求。然而，当所有这些代码正在执行时，gif 图片会冻结，并且只有在代码执行完成后才开始“移动”。这是为什么？如何解决这个问题？ 我使用的是 Chrome 11。

- Skizit

---

你使用的是哪个浏览器，以及它的版本号？（猜测答案：Internet Explorer，除了可能的9版本之外的所有版本） - Kobi

这是一个阻塞的 AJAX 调用吗？也许你应该发布整个代码。 - Spoike

我已经发布了涉及的AJAX代码。 - Skizit

Answer 1

我猜你只需要确保使用了async: true

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

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

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

- Khalid

---

我正在使用Google Charts的示例代码，其中包含async: false，这导致了我的问题。谢谢！ - Jeff

Answer 2

你正在使用同步XHR。这会在等待请求完成时锁定浏览器。显然，这会导致严重的UI问题。

尝试异步。将open()的第三个参数设置为true。你还需要分配readystatechange事件并监听成功。 进一步阅读。

- alex

Answer 3

你希望在同步的ajax请求运行时看到loading.gif吗？

同步的ajax请求会完全锁定大多数浏览器的用户界面，导致任何您所做的更改直到请求完成才能显示出来。

如果你想在请求运行时看到loading.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
    }
}

- Harry Joy