Ajax loads the chrysanthemum loding effect and ajax loads the loding

Ajax loads the chrysanthemum loding effect and ajax loads the loding

During Ajax asynchronous requests, a dynamic gif image is usually used to create an Ajax Loading to increase the user experience.

Here we use Spin. js. The js script is compressed to 5 k and can create an Ajax Loading indicator without any image or any external CSS style.

The online design and demonstration of Spin. js are as follows:Http://fgnass.github.io/spin.js/

On the link page, we can dynamically set the style and automatically generate the style configuration script:

The usage of Spin. js is extremely simple:

Show the spinner

var target=document.getElementById("id") spinner.spin(target);

Hide a spinner

Spinner. spin ();

Let's take a simple and complete example to try it again:

<Script type = "text/javascript" src = "zepto. min. js "> </script> <script type =" text/javascript "src =" spin. min. js "> </script> <script type =" text/javascript "> // The first parameter is the tag loaded by the loading icon, and the second parameter is the ajax data interface, the third is the callback function. Function loadAjaxSpin (ele, get_url, callback) {var opts = {lines: 13, // number of petals length: 20, // petal length width: 10, // petal width radius: 30, // scale: 1, corners: 1, // smooth (0-1) color: '# 000', // Petal color opacity: 0.25, rotate: 0, // petal Rotation Angle ction: 1, // petal rotation direction 1: clockwise,-1: counterclockwise speed: 1, // petal rotation speed trail: 60, // drag (percentage) zIndex: 2e9 when the petals are rotated, // The Z axis of the spinner (2000000000 by default) className: 'spinner ', // The top style name of the spinner css style: '20140901', // The Position Unit of the spinner relative to the parent container Top: px left: '20160901', // The Position Unit of the spinner relative to the parent container Left: px shadow: false, // whether the petals show shadow hwaccel: false, // whether the spindle enables hardware acceleration and high-speed rotation position: 'absolute '}; var spinner = new spinner (opts ); $ (ele ). show (); var target = $ (ele) [0]; spinner. spin (target); $. ajax ({url: get_url, dataType: 'html', success: function (data) {spinner. spin (); $ (ele ). hide (); callback (data) ;}} var foo = function (data) {console. log (data) ;}$ (function () {$ ('# btnrequest '). on ('click', function () {loadAjaxSpin ('. spin ',' http://192.168.1.191/h5/font.html ', Foo );});}); </script> <div class = "spin"> </div> <input id = "btnRequest" type = "button" value = "request data"/> </div>

In the above example, we wrote a function loadAjaxSpin, which is used to display the loading icon before the ajax call starts. After the data is loaded, the loading icon disappears.

Effect: click the button to display the chrysanthemum and then execute the callback function.