YouTube喜欢Ajax加载栏

Expecting like- http://www.thepetedesign.com/demos/youtube_loadingbar_demo.html

I am working on Ajax loaders, Youtube like ajax loader has impressed me much.

Well before Trying this loader i usually used to load ajax loaders in this way-

Whenever ajax starts, completes-

<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>

I was using images and showing and hiding them on ajax start and end functions.

Now i wanted to use youtube like loader-

For a simple link it was working fine-

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

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

I am not able to use this ajax loader on every ajax start and complete function.

I tried-

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

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

    });
</script>

I want this ajax loader to appear on every ajax request in application. How can this be done?

To set the ajaxStart for every ajax call on page, bind ajaxStart to document object:

$(document).ajaxStart(function() {

});

Inside an ajax call settings, set the context as below:

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

Then, in ajaxSend(), you can access the element which triggered ajax like below:

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

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.