jQuery效果/動畫加載

Question

我正在尋找一種非常簡單的效果，以使用戶知道某些背景Ajax正在等待處理。

我只是想簡單地使“加載”緊隨其后的三個點進行動畫處理，直到ajax完成為止。

即

1: Loading
2: Loading.
3: Loading..
4: Loading...

重復

JQuery是否有任何本機方法可以實現此目的？

Answer 1

如果您需要與所有瀏覽器兼容的東西

找到這個工作的家伙： https ://jsfiddle.net/oxkzzrwe/這個插件應該像這樣使用：

$("#randomArea").Loadingdotdotdot({
    "speed": 400,
    "maxDots": 4,
    "word": "Loading"
});

還可以找到ajaxprefilter 本機方法在每個ajax請求之后執行任何操作

Answer 2

我同意以上答案，有很多很棒的CSS微調器解決方案，請使用這些解決方案。 我個人將：在觸發AJAX調用的事件函數中，只需使用

$('.spinner').show();

然后在AJAX成功回調中

$('.spinner').hide();

像這樣，例如：

（我假設如果您知道如何使用AJAX，則可以弄清楚如何制作CSS微調器。有很多可用的資源和插件。）

$('.ajax-trigger').click(function () {
    $('.spinner').show();
    $.ajax({
       url: 'http://test.blah.com/test.php',
       data: {
          format: 'json'
       },
       error: function() {
          $('.spinner').hide();
          $('#info').html('<p>An error has occurred</p>');
       },
       dataType: 'json',
       success: function(data) {
          $('.spinner').hide();
          $('#info').html('<p>Success</p>');
       },
        type: 'GET'
    }) 
});

Answer 3

有很多（ajax）加載器/旋轉器動畫都可用於jquery和vanila javascript ，但是個人而言，我更喜歡純html/css旋轉器（有時它們需要一點額外的html或特殊的html）

但是，有些純css微調器動畫（例如Single Element CSS Spinners）僅使用單個元素（天才！）。

純html/css動畫的優點是無需在瀏覽器中加載甚至激活javascript就可以工作 ，而且它們比純javascript動畫的性能更高（至少在大多數情況下是這樣）。