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

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

function showLoad () {
    ...
}

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

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

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


当前回答

我使用jQuery UI对话框。(也许它也适用于其他ajax回调?)

$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
    height: 300,
    width: 600,
    title: 'Wait for it...'
});

包含一个动画加载gif,直到ajax调用完成时其内容被替换为止。

其他回答

JavaScript

$.listen('click', '#captcha', function() {
    $('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
    $.get("/captcha/new", null, function(data) {
        $('#captcha-block').html(data);
    }); 
    return false;
});

CSS

#loading { background: url(/image/loading.gif) no-repeat center; }

这对我来说是最好的方法:

jQuery:

$(document).ajaxStart(function() {
  $(".loading").show();
});

$(document).ajaxStop(function() {
  $(".loading").hide();
});

咖啡:

  $(document).ajaxStart ->
    $(".loading").show()

  $(document).ajaxStop ->
    $(".loading").hide()

文档: ajaxStart, ajaxStop

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

 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/

最后我对原来的回复做了两处修改。

从jQuery 1.8开始,ajaxStart和ajaxStop只能附加到文档中。这使得仅过滤某些ajax请求变得更加困难。秀…… 切换到ajaxSend和ajaxComplete可以在显示转轮之前检查当前ajax请求。

以下是修改后的代码:

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })

你可以使用jQuery的。ajax函数,使用它的选项beforeSend,定义一些函数,你可以在其中显示类似loader div的东西,在success选项中,你可以隐藏loader div。

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

你可以有任何旋转Gif图像。下面是一个网站,根据你的配色方案,它是一个很棒的AJAX加载器生成器:http://ajaxload.info/