用于加载的JQuery效果/动画

JQuery effect/animation for loading

本文关键字：动画 效果 JQuery 加载 用于      更新时间：2023-09-26

我正在寻找一个非常简单的效果，让用户知道一些后台ajax正在挂起。

我想简单地让"Loading"后面跟着三个点，直到ajax完成。

即

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

重复

JQuery有任何本机方法可以实现这一点吗？

如果您需要与所有浏览器兼容的东西

找到这个工作fiddel：https://jsfiddle.net/oxkzzrwe/这个插件应该这样使用：

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

还找到ajaxprefilter本机方法在每次ajax请求

之前执行任何操作

我同意上面的答案，有很多很棒的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'
    }) 
});

有许多（ajax）加载程序/微调器动画可用于jquery和vanila javascript，但我个人更喜欢纯html/css微调器（有时他们需要一点额外的html或特殊的html）

然而，也有纯粹的css微调器动画，如单一元素CSS微调器，只使用单一元素（天才！）

纯html/css动画具有的优点，即在浏览器中不加载甚至不激活javascript的情况下工作，而且它们比纯javascript动画（至少在大多数情况下）更具性能。

相关文章：