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

发布于 2024-11-07 15:09:00 字数 577 浏览 1 评论 0原文

我正在附加一个 gif 动画，它是一个加载栏。 gif 是在代码的前面定义的，然后我只需执行以下操作..ajax

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

调用看起来像...

    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

原文

I'm appending an animated gif which is a loading bar. The gif is defined earlier in the code and I then just do the following..

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

The ajax call looks something like...

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

to show the loading gif. I then perform some checks (if statements) followed by an AJAX request. However, the gif freezes while all this code is executing and only begins to 'move' once the code has finished executing. Why is this? How do I fix this issue?

I'm using Chrome 11

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不一样的天空 2024-11-14 15:09:00

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

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

进一步阅读。

回复收藏 0 原文

挖鼻大婶 2024-11-14 15:09:00

我想只要确保您使用的是 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
        }
    });

I guess just make sure you are using 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
        }
    });

回复收藏 0 原文

南城旧梦 2024-11-14 15:09:00

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

Are you expecting to see the loading.gif while your synchronous ajax request is running?

Synchronous ajax requests completely lock up the UI of most browsers, preventing any changes you make from being displayed until the request completes.

If you want to see loading.gif while the request is running, make it asynchronous:

//--- 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
    }
}

回复收藏 0 原文

~没有更多了~