GIF停止时，AJAX调用运行

Question

我读使用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调用运行停止。它在任何浏览器中都不起作用。请问有什么问题？

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

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