將加載gif添加到ajax請求中

Question

我已經查看了幾個答案， 其中最有幫助的信息是 “在啟動AJAX請求后立即顯示它”，然后“在請求完成后再次隱藏圖像”。 我該怎么做？ 是這樣的嗎：

showGif();
$.ajax({
    url: whatever,
    success: function(data) {
        hideGif();
    }
});

還是有更好的方法呢？ 如果ajax請求沒有成功怎么辦？

Answer 1

我傾向於使用傳統的HTML和CSS將gif加載到頁面中，但默認情況下，我將其設置為隱藏。 然后，您可以使用AJAX事件處理程序隱藏和顯示您的加載gif，而無需重復任何代碼：

$(document).bind("ajaxSend", function(){
   $("#loading").show();
}).bind("ajaxComplete", function(){
   $("#loading").hide();
});

Answer 2

我建議always運行此命令，以便無論請求成功還是失敗always將其隱藏：

showGif();
$.ajax({
    url: whatever,
    success: function(data) {
        //
    }
}).always(function(){
     hideGif();
});

Answer 3

如果您執行hideGif();則沒有問題hideGif(); 在ajax中success 。 但是我建議你把它做成ajax complete 。

Ajax complete：當請求完成時（執行成功和錯誤回調之后）將調用的函數。

   showGif();
    $.ajax({
        url: whatever,
        success: function(data) {
           //-- Do your other stuff here
        },
        complete: function () {
          hideGif();
       } 
    });

Answer 4

還是有更好的方法呢？

我不這么認為。

如果ajax請求沒有成功怎么辦？

您可以擴展此方法以在發生錯誤時顯示錯誤消息。

showGif();
$.ajax( "example.php" )
  .done(function() {
    // success
  })
  .fail(function() {
    // error
    alert( "error" );
  })
  .always(function() {
    hideGif();
  });