Javascript 如何使GIF图像在AJAX过程中保持移动？

我试图在AJAX中添加一个非常简单的加载GIF的

。我使用动画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
GIF在移动0,1-1s后停止
10秒后，将显示弹出窗口。（所以，在我看到这个弹出窗口之前，我的屏幕上有一个冻结的gif）

我所期望的是：


显示GIF
GIF不断移动（只要收集数据所需的秒数+1秒）
隐藏GIF
显示弹出窗口
问题似乎是浏览器在处理数据时无法使微调器旋转。首先，您需要对
success
的全部内容进行注释以进行测试。如果微调器不会冻结，这意味着不是数据的绝对大小导致了这个ui故障，而是解析问题。在这种情况下，您可能希望修改您的计划，将解析作业划分为多个块，并在两个块之间进行少量的逐点调用，以允许浏览器使用
setInterval
处理ui，但不要忘记在作业完成时调用
clearInterval
。如果问题在于数据量过大，则您必须接受此行为，或者使用
setInterval
将响应分成数据包并发送请求，直到没有更多数据包可接收为止。
使用以下方法：

  $(document).ajaxStart(function () {            
        $('.loading').show()
    }).ajaxError(function (e, xhr, opts) {
        $('.loading').hide();
    }).ajaxComplete(function (e, xhr, opts) {
        $('.loading').hide();
    }).ajaxStop(function () {
        $('.loading').hide();
    });

或

在ajax中使用beforeSend：

    $('#btn_src').on('click', function (e) {         
        $.ajax({
            type: "POST",
            url: "some_function",
            async: true,
            cache: false,
            dataType: "json",
            data: 'some_var',
            beforeSend: function (msg) {
              $('.loading').show();
            }
            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
            }
        });
    });

您的代码已经在异步运行，所以您想要的是应该发生的事情。正在加载多少数据？我认为发生这种情况的唯一原因是请求检索了大量数据，这需要一些时间进行反序列化。是的。有很多数据。这就是为什么我需要在收集所有数据之前继续加载。你能在success函数中提供处理数据的代码吗？那就是你的问题。我建议使用分页来减少每个请求的数据量。您也可以将其与一些过滤逻辑结合起来，以进一步减少发送的数据。您可以将AJAX调用放在
setTimeout（）
中，但我并不认为这是一个可行的解决方案。它只是不必要地延迟了用户。