如何显示加载旋转器在jQuery?

在原型中，我可以用下面的代码显示“加载…”图像:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

在jQuery中，我可以将服务器页面加载到一个元素中:

$('#message').load('index.php?pg=ajaxFlashcard');

但是我如何附加一个加载旋转到这个命令，因为我在原型?

当前回答

我也想回答这个问题。我在jQuery中寻找类似的东西，这是我最终使用的。

我从http://ajaxload.info/得到了我的加载转轮。我的解决方案基于http://christierney.com/2011/03/23/global-ajax-loading-spinners/上的这个简单答案。

基本上你的HTML标记和CSS看起来是这样的:

<style>
     #ajaxSpinnerImage {
          display: none;
     }
</style>

<div id="ajaxSpinnerContainer">
     <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>

然后你为jQuery编写的代码看起来像这样:

<script>
     $(document).ready(function () {
          $(document)
          .ajaxStart(function () {
               $("#ajaxSpinnerImage").show();
          })
          .ajaxStop(function () {
               $("#ajaxSpinnerImage").hide();
          });

          var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
          $.getJSON(owmAPI)
          .done(function (data) {
               alert(data.coord.lon);
          })
          .fail(function () {
               alert('error');
          });
     });
</script>

就是这么简单:)

2014-02-21 09:17:49

其他回答

有几种方法。我更喜欢的方法是在元素本身的ajaxStart/Stop事件上附加一个函数。

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

ajaxStart/Stop函数将在任何Ajax调用时触发。

更新:从jQuery 1.8开始，文档声明. ajaxstart /Stop只能被附加到文档中。这将把上面的代码片段转换为:

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

2008-09-16 01:21:26

$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback

2008-09-16 01:23:33

您可以在AJAX调用之前将动画图像插入到DOM中，并执行内联函数将其删除…

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

这将确保你的动画在随后的请求中从相同的帧开始(如果这很重要的话)。注意，旧版本的IE可能在动画方面有困难。

好运！

2008-09-16 01:28:12

如果您计划在每次发出服务器请求时使用加载器，则可以使用以下模式。

 jTarget.ajaxloader(); // (re)start the loader
 $.post('/libs/jajaxloader/demo/service/service.php', function (content) {
     jTarget.append(content); // or do something with the content
 })
 .always(function () {
     jTarget.ajaxloader("stop");
 });

这段代码特别使用了jajaxloader插件(我刚刚创建的)

https://github.com/lingtalfi/JAjaxLoader/

2016-03-03 21:09:55