YouTube 之类的 Ajax 加载栏答案

【问题标题】：YouTube like Ajax Loading BarYouTube 之类的 Ajax 加载栏
【发布时间】：2013-10-10 11:16:42
【问题描述】：

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

我正在研究 Ajax loader，Youtube 之类的 ajax loader 给我留下了深刻的印象。

在尝试这个加载器之前，我通常习惯以这种方式加载 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 请求中。如何做到这一点？

【问题讨论】：

创建一个单独的函数来处理应用程序上的所有 ajax 请求，然后在完成后调用该函数中的加载器
@ArunKillu，我已经有了为所有请求提供加载器的功能。经历过你告诉我的这种方式。

标签： jquery ajax youtube

【解决方案1】：

要为页面上的每个 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 加载器的技术。
你在ajaxStart()里面放了什么？希望您没有使用$(this).loadingbar();，因为this 现在将参考文档
我只是简单地调用了loadingbar() 函数。 $(document).ajaxstart(function(){ loadingbar();});
感谢您的回答。即使这样，我仍然遇到麻烦。

【解决方案2】：

您可以通过$.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。

【讨论】：