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

问题描述

| 我要附加一个动画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。然后，我先执行一些检查（如果语句），然后执行AJAX请求。但是，在执行所有这些代码时，gif冻结，并且仅在代码完成执行后才开始“移动”。为什么是这样？如何解决此问题？ 我正在使用Chrome 11     

解决方法

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

open()

的第三个参数设置为

true

。您还需要分配

readystatechange

事件并聆听成功。 进一步阅读。     ,我想只是确保您正在使用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
        }
    });

    ,您是否希望在运行同步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
    }
}