1

期待喜欢 - 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 请求上。如何才能做到这一点？

4

2 回答 2

3

You can setup defaults for jQuery ajax calls via $.ajaxSetup

Like so:

$.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();
        });
    }
});

Any subsequent $.ajax calls will use those defaults (unless it specifically overrides the values), so a loading bar will show up each time. You can see this in action here: http://jsfiddle.net/QfgJ5/1/

Keep in mind that if you're performing multiple ajax requests at the same time, this will interrupt the loading bar animation. You may want to consider generating a unique loader div for each ajax request.

于 2013-10-05T22:51:08.097 回答
0

要为页面上的每个 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();
  }
});
于 2013-10-03T17:52:48.173 回答