如何在AJAX处理期间使GIF图像继续运动？

Question

我想在我的 AJAX 中添加一个非常简单的加载 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
• GIF在移动0.1-1秒后停止
• 10秒后弹出窗口显示。（因此，在我看到这个弹出窗口之前，我的屏幕上会有一个冻结的gif）

我期望的是：

• 显示GIF
• GIF保持运动（只要收集数据所需的秒数+1秒）
• 隐藏GIF
• 显示弹出窗口

- Vahn

---

您的代码已经在异步运行，所以您想要的就是应该发生的事情。正在加载多少数据？我唯一能想到的原因是请求检索了大量数据，这需要一些时间进行反序列化。 - Rory McCrossan

你能提供在成功函数中处理数据的代码吗？ - Harshit Jain

那么这就是你的问题了。我建议通过使用分页来减少每个请求中的数据量。你还可以结合一些过滤逻辑来进一步减少发送的数据量。 - Rory McCrossan

你可以把AJAX调用放在一个setTimeout()中，但我不会真的认为这是一个可行的解决方案。它只是毫无必要地延迟了用户。 - Rory McCrossan

哪个浏览器？你尝试过在其他浏览器中吗？你有什么我们可以查看的东西吗？ - Manngo

Answer 1

使用这个：

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

- Saeed Ahmadian

Answer 2

问题似乎在于浏览器无法在处理数据时使旋转器旋转。首先，您需要测试注释掉success的整个内容。如果旋转器不会冻结，则意味着不是数据量本身导致了此UI故障，而是解析。在这种情况下，您可能需要修改计划，将解析作业分成块，并逐个调用它们，并在之间留有一点时间以允许浏览器使用setInterval处理UI，但不要忘记在完成作业时调用clearInterval。如果问题出在数据量本身上，那么您将不得不接受这种行为或者将响应分成数据包，并使用setInterval发送请求，直到没有更多数据包可接收。

- Lajos Arpad