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

Loading gif "freezes" when code is executing

本文关键字：冻结 执行 代码 gif 加载      更新时间：2023-09-26

我正在附加一个动画 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

浏览器

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

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

延伸阅读。

我想只要确保你使用的是异步：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 请求运行时看到加载.gif？

同步 ajax 请求会完全锁定大多数浏览器的 UI，从而阻止显示您所做的任何更改，直到请求完成。

如果要在请求运行时看到加载.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
    }
}
相关文章：