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个回答
1
我的ajax代码看起来像这样，实际上，我只是将async: false这一行注释掉了，然后旋转器就出现了。
$.ajax({
        url: "@Url.Action("MyJsonAction", "Home")",
        type: "POST",
        dataType: "json",
        data: {parameter:variable},
        //async: false, 

        error: function () {
        },

        success: function (data) {
          if (Object.keys(data).length > 0) {
          //use data 
          }
          $('#ajaxspinner').hide();
        }
      });

在执行ajax代码之前，我会在一个函数中显示旋转图标：

$("#MyDropDownID").change(function () {
        $('#ajaxspinner').show();

对于Html，我使用了一个font awesome的类： 希望能对某些人有所帮助。
但是您也需要在出现错误时隐藏旋转器。 - ankush981
1

我认为你是对的。 这种方法太全局了...

然而，当您的AJAX调用对页面本身没有影响时，它是一个很好的默认值。（例如后台保存）。 （您始终可以通过传递“global”：false来关闭某个ajax调用的全局设置-请参阅jquery文档）

当AJAX调用旨在刷新页面的一部分时，我喜欢我的“加载”图像特定于刷新的部分。 我想看到哪个部分被刷新。

想象一下，如果您可以简单地编写类似以下内容的内容，那将是多么酷：

$("#component_to_refresh").ajax( { ... } );

这将在此部分显示“加载”。 下面是我编写的一个处理“加载”显示的函数，但它仅适用于您在ajax中刷新的区域。

首先，让我向您展示如何使用它

<!-- assume you have this HTML and you would like to refresh 
      it / load the content with ajax -->

<span id="email" name="name" class="ajax-loading">
</span>

<!-- then you have the following javascript --> 

$(document).ready(function(){
     $("#email").ajax({'url':"/my/url", load:true, global:false});
 })

这就是这个函数 - 一个基本的起点，您可以根据需要进行增强。它非常灵活。

jQuery.fn.ajax = function(options)
{
    var $this = $(this);
    debugger;
    function invokeFunc(func, arguments)
    {
        if ( typeof(func) == "function")
        {
            func( arguments ) ;
        }
    }

    function _think( obj, think )
    {
        if ( think )
        {
            obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
        }
        else
        {
            obj.find(".loading").hide();
        }
    }

    function makeMeThink( think )
    {
        if ( $this.is(".ajax-loading") )
        {
            _think($this,think);
        }
        else
        {
            _think($this, think);
        }
    }

    options = $.extend({}, options); // make options not null - ridiculous, but still.
    // read more about ajax events
    var newoptions = $.extend({
        beforeSend: function()
        {
            invokeFunc(options.beforeSend, null);
            makeMeThink(true);
        },

        complete: function()
        {
            invokeFunc(options.complete);
            makeMeThink(false);
        },
        success:function(result)
        {
            invokeFunc(options.success);
            if ( options.load )
            {
                $this.html(result);
            }
        }

    }, options);

    $.ajax(newoptions);
};
1
0
<script>
                $(window).on('beforeunload', function (e) {
                    $("#loader").show();
                });
                $(document).ready(function () {
                    $(window).load(function () {
                        $("#loader").hide();
                    });
                });
            </script>

<div id="loader">
                    <img src="../images/loader.png" 
                         style="width:90px;">
                </div>
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接