spinner

[uniquejava]

spinner

老天保佑: http://ajaxload.info

solution 1

http://fgnass.github.io/spin.js/

var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

The spin() method creates the necessary HTML elements and starts the animation. If a target element is passed as argument, the spinner is added as first child and horizontally and vertically centered.

Manual insertion

In order to manually insert the spinner into the DOM you can invoke the spin() method without any arguments and use the el property to access the HTML element:

var spinner = new Spinner().spin();
target.appendChild(spinner.el);

solution 2

The code is pretty basic:

$.ajaxSetup({
    beforeSend:function(){
        // show image here
        $("#busy").show();
    },
    complete:function(){
        // hide image here
        $("#busy").hide();
    }
});

And here is a place to generate an image: http://www.ajaxload.info/

All you have to do is to define how the element with the id of busy

The great post

Here is a great post on how to create your own

Hi, first of all you need to undestand the life cycle of an AJAX request.

Each ajax request goes through 4 phases:

before send (beforeSend)
success (success)
error (error)
complete (complete)

Actually only the beforeSend and complete are always triggered.

success triggers only when the request have not encountered an HTTP error.

error triggers when there is an HTTP error.

After this little and hope not complicated explanation the next thing to think about is where in all the 4 phases you will put the code to show/hide the ajax request loader.

So, any request (even if it fails or success) have to show the loader.

Having that in mind, i would add the code in the beforeSend phase or before call the $.ajax or the other shorthand ajax request functions ($.post(), $get(), $.getJSON()...).

And now comes the how to add the loader.

There are different approaches to do this, it depend on how your markup is structured.

-Maybe you need a loader appearing in the left bottom corner of your page when any ajax request occurs OR
-You need to load the requested data into a single element of your markup, so only in that element a loader should be displayed.

Both options require css.
So, lets get started:

A general ajax request loader for the entire page:

The Markup (structure)

<div id="ajax-loader"></div>

You should put this element inside the body tags

The CSS (presentation)

#ajax-loader {
     display: none;
     position: fixed;
     bottom: 0;
     left: 0;
     background: url('the path to the image(often a .gif file)') scroll no-repeat 5px 50% transparent;
}

With this rule we are making the div fixed in the bottom left corner of the browser viewport, initially it will not be displayed, because only be displayed when whe do an ajax request.

The Javascript (behavior)

In this case we have only one loader for any request, so it should be good to write once the code to show/hide the loader.
To do this there are some "Global Ajax Event Handlers" and the .ajaxStart() and .ajaxStop() will be of much help in this scenario.

This global event handlers are attached to an element, in this case our element is the <div id="loader"></div>.

$(function(){

    $('#ajax-loader')
        .ajaxStart(function(){
              $(this).fadeIn();
        })
        .ajaxStop(function(){
              $(this.fadeOut());
        })


     // Here you write your custom code for your page/app
     // including your ajax requests
});

For this first approach, this is all you have to do.

A specific element ajax loader

i´m not sure if this is the right name for this, but what i mean is to show the user that some portion of the page id being loaded.

The markup can be any structure, but in this case i will use a list of elements representing products.

The Markup

<div id="products-container" class="container">
  <ul id="products">
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
    <li>Juice</li>
  </ul>
  <div class="ajax-loader"></div>
</div>

Imagine that this element is in constant change due to the interaction of the user with the page, maybe he selects a category and this list of products is updated to show the products within that category (jeje, that sounds like microsoft´s examples).

The content to be updated must be inside of a container element, in this case a div with a container class.
This is required because the ajax-loader element will be displayed in absolute position, so it will be positioned under the first parent element relatively positioned and that must be the container element.

The CSS

div.container {
     position: relative;
}

div.ajax-loader {
    display:none;
    position: absolute;
    top: 0;
    left: 0;
    background: url('the path to the image(often a .gif file)') scroll no-repeat 50% 50% transparent;
    width: 100%;
    height: 100%;
}

Phew, a little more css than the last exmaple, but this give you great flexibility if you need to change the "look" of the ajax loader.

The Javascript

Finally we are ready to show our loader.

$(function(){

      $.ajax({
            'type': 'POST',
            url: 'my_server_side_code_file.php',
            data: {category: 2},  // This value came come from another element like a categories list
            dataType: 'json',  // if you are using json as data transfer format
            timeout: 10000, // Recomended for most request

            beforeSend: function() {
                  // Here we show the loader
                  $('#products-container .ajax-loader').show();
            },
            success: function(json){
                  // Here your custom code to work with the requested data

            },
            complete: function(){
                  // Here we hide the loader because this handler always fires on any failed/success request
                  $('#products-container .ajax-loader').hide();
            }
      });
});

That´s pretty much you have to do.

There may be more elegant solution to do this, but i have find this easy to implement.

Actually, you should start using the new "promise/deferred" object returned from the $ajax function to use the .done(), .fail() and .always() events cause this can let you attach more than one handler to the events of the ajax request.

I have little knowledge of this new object, and a question arise for more experienced developers:

if the current ajax events (beforeSend, success, error, complete) are going to be removed in some time,
how are we going to manage the beforeSend event?

.done() = success
.fail() = error
.always() = complete

and beforeSend?

Thanks everybody and sorry for my poor english, i hope this is useful to you.