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

我正在追加一个加载栏的动画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

来源

2011-05-16 Skizit

是什么浏览器，你使用和什么版本？（错误地猜出答案：Internet Explorer，所有版本（可能除外9）） – Kobi 2011-05-16 09:20:18

它是一个阻塞的AJAX调用？也许你应该发布整个代码。 – Spoike 2011-05-16 09:20:46

我已经发布了涉及的AJAX代码。 – Skizit 2011-05-16 09:23:43

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

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

Further Reading。

来源

2011-05-16 09:26:25 alex

当您的同步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 
    } 
}

来源

2011-05-16 09:28:12

我猜只是确保你使用的是异步：真

$("#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 
     } 
    });

来源

2012-09-06 00:40:12 Khalid

我使用google图表的示例代码，它有'async：false'，对我造成这个问题。谢谢！ – Jeff 2015-02-26 23:43:16

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

回答

相关问题