如何在AJAX進行過程中使GIF圖像保持移動？

我想在我的AJAX中添加一個非常簡單的loading GIF。我使用this animated gif。但是，GIF僅移動0.5-1s。然後，10秒後顯示AJAX數據表單。如何在AJAX進行過程中使GIF圖像保持移動？

$('#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-1s
10秒後彈出顯示後停止。（所以，在我看到這個彈出之前，我的屏幕上有一個凍結的gif）。

我的預期是什麼：

顯示GIF
GIF繼續移動（只要該數據所需的秒的時間內收集+ 1S）
隱藏GIF
展彈出

來源

2017-05-02 Vahn

你的代碼已經異步運行，所以你想是應該發生。有多少數據正在加載？我能想到發生這種情況的唯一原因是請求檢索了大量數據，並且這需要一些時間來反序列化。 –

是的。有很多數據。這就是爲什麼我需要在收集所有數據之前加載繼續旋轉的原因 – Vahn

您能否提供處理成功函數中的數據的代碼？ –

問題似乎是，瀏覽器無法使工作時旋轉工具旋轉你的數據。首先，您需要測試並註釋success的全部內容。如果微調器不會凍結，那就意味着不是數據的絕對大小是造成這種故障的原因，而是解析。在這種情況下，您可能希望修改計劃以將解析作業分成塊並在一段時間內一點一點地調用它們，以允許瀏覽器使用setInterval來處理UI，但是當作業爲時，請不要忘記調用clearInterval完成。如果問題與數據的龐大有關，那麼您必須接受這種行爲或將響應分成數據包並使用setInterval發送請求，直到沒有更多數據包可以接收爲止。

來源

2017-05-02 10:43:37

使用本：

$(document).ajaxStart(function() {    
     $('.loading').show() 
    }).ajaxError(function (e, xhr, opts) { 
     $('.loading').hide(); 
    }).ajaxComplete(function (e, xhr, opts) { 
     $('.loading').hide(); 
    }).ajaxStop(function() { 
     $('.loading').hide(); 
    });

或

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

來源

2017-05-02 10:59:47

如何在AJAX進行過程中使GIF圖像保持移動？

回答

相關問題