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