logo标签列表

如何在jQuery中显示加载动画？

jqueryspinnerprototypejsequivalencelanguage-interoperability
442

在 Prototype 中，我可以使用以下代码显示“加载中...”的图片：

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

function showLoad () {
    ...
}
在jQuery中，我可以使用以下代码将服务器页面加载到元素中：
$('#message').load('index.php?pg=ajaxFlashcard');

但我该如何像在Prototype中一样，为这个命令添加一个loading spinner呢？

25个回答
8

您可以简单地将加载图像分配给稍后将使用Ajax调用加载内容的同一标记：

$("#message").html('<span>Loading...</span>');

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

您可以使用标签替换标签，并将其作为图像标记。
1
这样管理UI会很困难。我们可能需要完全不同的样式来显示“加载”文本和最终消息。我们可以使用上面提到的回调方法来处理这个问题。 - Jaseem
8

除了为ajax事件设置全局默认值外，您还可以为特定元素设置行为。也许只需要更改它们的类就足够了吗？

$('#myForm').ajaxSend( function() {
    $(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
    $(this).removeClass('loading');
});

以下是隐藏带有旋转图标的#myForm的示例CSS：

.loading {
    display: block;
    background: url(spinner.gif) no-repeat center middle;
    width: 124px;
    height: 124px;
    margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
    display: none;  
}
spinner.gif -- 一个古老而温柔的时光。 - Lee Goddard
4
$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');

        $.ajax({
            url:  uri,
            cache: false,
            success: function(){
                $('#loading-image').html('');           
            },

           error:   function(jqXHR, textStatus, errorThrown) {
            var text =  "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
           $('#loading-image').html('<span style="color:red">'+text +'  </span>');

            }
        });
最短的方法是插入一个带有从http://www.ajaxload.info/下载的具有透明背景的图像标记。 - Izabela Skibinska
4

请注意，您必须使用异步调用才能使旋转器起作用（至少这就是导致我的旋转器在ajax调用之后才显示，并且随着调用的完成而迅速消失的原因）。

$.ajax({
        url: requestUrl,
        data: data,
        dataType: 'JSON',
        processData: false,
        type: requestMethod,
        async: true,                         <<<<<<------ set async to true
        accepts: 'application/json',
        contentType: 'application/json',
        success: function (restResponse) {
            // something here
        },
        error: function (restResponse) {
            // something here                
        }
    });
3
非常棒！特别是如果您查看演示...禁用DOM元素，在标签中，全屏覆盖，元素覆盖...它提供了您所需的一切。而且，您可以轻松地将全屏覆盖与此答案结合使用，以立即使其工作。 - Matt
2

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; }
2
我曾在jQuery UI Dialog中使用以下代码。（可能适用于其他ajax回调函数）
$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
    height: 300,
    width: 600,
    title: 'Wait for it...'
});
在ajax调用完成前，的动画会一直显示。
2
这是我认为最好的方式：
jQuery：
$(document).ajaxStart(function() {
  $(".loading").show();
});

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

咖啡:

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

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

Docs: ajaxStart, ajaxStop

1
如果您计划在每次进行服务器请求时使用加载器，可以使用以下模式。
 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/

1
我这样做：
var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
           $('#detail_thumbnails').html(preloaderdiv);
             $.ajax({
                        async:true,
                        url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
                        success:function(data){
                            $('#detail_thumbnails').html(data);
                        }
             });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接