Question

期待像 - http://www.thepetedesign.com/demos/youtube_loadingbar_demo.html

我正在研究Ajax加载器，像ajax加载器这样的Youtube让我印象深刻。

在尝试这个加载器之前，我通常用这种方式加载ajax加载器 -

每当ajax启动时，完成 -

<script type="text/javascript">
        $(function () {
            $('.loader').ajaxStart(function () {
                $(this).fadeIn();
            }).ajaxComplete(function () {

                $('.loader').fadeOut();
            });
            $(window).load(function () {
                $('.loader2').fadeOut();
            });

        });
    </script>

HTML -

  <div class="loader">
            <img src="../../Images/AjaxLoader.gif" /></div>
        <div class="loader2">
            <img src="../../Images/AjaxLoader.gif" /></div>

我正在使用图像并在ajax开始和结束功能上显示和隐藏它们。

现在我想像装载机一样使用youtube -

对于一个简单的链接，它工作正常 -

<a id="clickme">Click me</a>

<script type="text/javascript">
    $(document).ready(function () {
        $("a").loadingbar({
done:function({});
        });
    });
    </script>

我无法在每个ajax启动和完成功能上使用此ajax加载程序。

我试过 -

<script type="text/javascript">
    $(function () {
        $('a').ajaxStart(function () {
            $(this).loadingbar();
        }).ajaxComplete(function () {

            $(this).loadingbar();
        });

    });
</script>

我希望这个ajax加载器出现在应用程序中的每个ajax请求中。怎么办呢？

Answer 1

您可以通过$.ajaxSetup

设置jQuery ajax调用的默认值

像这样：

$.ajaxSetup({
    beforeSend: function() {
        if ($("#loadingbar").length === 0) {
            $("body").append("<div id='loadingbar'></div>")
            $("#loadingbar").addClass("waiting").append($("<dt/><dd/>"));
            $("#loadingbar").width((50 + Math.random() * 30) + "%");
        }
    },
    complete : function() {
        $("#loadingbar").width("101%").delay(200).fadeOut(400, function() {
            $(this).remove();
        });
    }
});

任何后续的$.ajax调用都将使用这些默认值（除非它专门覆盖值），因此每次都会显示一个加载栏。您可以在此处查看此操作：http://jsfiddle.net/QfgJ5/1/

请记住，如果您同时执行多个ajax请求，则会中断加载栏动画。您可能需要考虑为每个ajax请求生成唯一的加载器div。

Answer 2

要为页面上的每个ajax调用设置ajaxStart，请将ajaxStart绑定到文档对象：

$(document).ajaxStart(function() {

});

在ajax通话设置中，将context设置如下：

$.ajax({
  //other settings
   context: this, //set whatever element triggers ajax
});

然后，在ajaxSend()中，您可以访问触发ajax的元素，如下所示：

 $(document).ajaxSend(function (event, request, settings) {
  if (settings.context != undefined &&
     settings.context.length && 
     settings.context[0].nodeType) {
     $(settings.context).loadingbar();
  }
});

YouTube就像Ajax Loading Bar

2 个答案: