javascript - 如何让 GIF 图像在 AJAX 处理过程中保持移动？

Question

我正在尝试在我的 AJAX 中添加一个非常简单的 loading GIF。我使用 this 动画 gif。但是，GIF 仅移动 0,5-1 秒。然后，10 秒后显示 AJAX 格式的数据。

$('#btn_src').on('click', function (e) {
    $('.loading').show();
    $.ajax({
        type: "POST",
        url: "some_function",
        async: true,
        cache: false,
        dataType: "json",
        data: 'some_var',
        success: function (data) {
            //some data from AJAX success call. 
        },
        complete: function () {
            $('.loading').hide();
            $('#myModal').modal('show'); //This is a modal to display the data from AJAX
        }
    });
});

当前的 AJAX 有这样的行为:

• 显示动图
• GIF 在移动 0.1-1 秒后停止
• 10 秒后显示弹出窗口。 (所以，在我看到这个弹出窗口之前。我的屏幕上有一个卡住的 gif)。

我期望的是:

• 显示动图
• GIF一直在动(只要收集数据所需的秒数+1s)
• 隐藏动图
• 显示弹出窗口

Answer 1

问题似乎是浏览器在处理您的数据时无法使微调器旋转。首先，您需要通过注释掉 success 的全部内容来进行测试。如果微调器不会卡住，这意味着不是数据的绝对大小是这个 ui 故障的原因，而是解析。在这种情况下，您可能想要修改您的计划，将解析作业分成多个 block ，并在间隔很短的时间内一点一点地调用它们，以允许浏览器使用 setInterval 处理 ui，但不要忘记在作业完成时调用 clearInterval。如果问题出在数据的绝对大小上，那么您要么必须接受这种行为，要么将响应分成数据包并使用 setInterval 发送请求，直到没有更多数据包可接收为止。