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

显示加载gif。然后我执行一些检查（if语句），然后执行AJAX请求。但是，当所有这些代码都在执行时，gif会冻结，并且只有在代码执行完毕后才开始“移动”。为什么是这样？我该如何解决这个问题？

我正在使用Chrome 11

Answer 1

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

尝试异步。将open()的第三个参数设为true。您还需要分配readystatechange事件并听取成功。

Further Reading

Answer 2

我想确保你使用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
        }
    });

Answer 3

您期望在同步ajax请求运行时看到loading.gif吗？

同步ajax请求完全锁定大多数浏览器的UI，防止在请求完成之前显示您所做的任何更改。

如果要在请求运行时看到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
    }
}

在执行代码时加载gif“冻结”

3 个答案: