运行 AJAX 调用时 GIF 停止工作答案

【问题标题】：GIF stops working when AJAX call is running运行 AJAX 调用时 GIF 停止工作
【发布时间】：2012-07-11 02:18:05
【问题描述】：

我正在使用 AJAX 和 jQuery 读取一个大文本文件：

$.ajax({
    type: "GET",
    url: "testing.txt",
    dataType: "text",
    success: function (returnText) {
        $("#viewDescription").text(returnText);
    }
});

然后，我想在请求完成时显示popup 和animated GIF。我使用以下代码做到了这一点：

$("#popup").on("ajaxSend", function () {
    $(this).show();
}).on("ajaxStop", function () {
    $(this).hide();
}).on("ajaxError", function () {
    $(this).hide();
});

<div style="display: none;" id="popup">
    <img src="loading.gif" />
</div>

弹出窗口显示和隐藏正确，但问题是 GIF 在 jQuery AJAX 调用运行时停止。它不适用于任何浏览器。请问可能是什么问题？

【问题讨论】：

请注意，.bind() 在 jQuery 1.7.+ 中已弃用。
@MBJ 我应该改用什么？
只需将 bind 替换为 .on()

标签： jquery ajax gif

【解决方案1】：

试试这样的：

$('#mybtn').on('click', function(e) {
    e.preventDefault();
    $("#popup").show(); // Show the loader
    $.ajax({
        type: "GET",
        url: "testing.txt",
        dataType: "text",
        success: function(returnText) {
            $("#popup").hide(); // Hide on success
            $("#viewDescription").text(returnText);
        },
        error: function() {
            $("#popup").hide(); // Hide on error
        }
    });
});

【讨论】：

【解决方案2】：

Try this:
$('#mybtn').on('click', function(e) {
    $.ajax({
        type: "GET",
        url: "testing.txt",
        dataType: "text",
        beforeSend:function(){
             $("#popup").show(); // Show the loader
        },
        success: function(returnText) {
            $("#popup").hide(); // Hide on success
            $("#viewDescription").text(returnText);
        },
        error: function() {
            $("#popup").hide(); // Hide on error
        }
    });
});

【讨论】：