当Ajax异步请求时，通常会用一张动态gif小图片做一个Ajax Loading，以增加用户体验。

这里我们使用的是Spin.js，压缩后是5k，可以创建一个没有任何图片或者任何外部CSS样式的Ajax Loading指示器

Spin.js的在线设计、演示和下载地址是：http://fgnass.github.io/spin.js/

我们可以在链接页面中动态设置样式，并自动生成样式配置脚本：

Spin.js的用法非常简单：

显示微调器

var target=document . getelementbyid(' id ')spinner . spin(target)；隐藏微调器

spinner . spin()；

让我们做一个简单完整的例子，体验一下：

脚本类型=' text/JavaScript ' src=' http : zepto . min . js '/script script type=' text/JavaScript ' src=' http : spin . min . js '/script script type=' text/JavaScript的第一个参数是加载图标加载的标签，第二个是ajax数据接口，第三个是回调函数。函数loadajaxpin(ele，get _ URL，callback){ var opts={ lines : 13，//花瓣数length3360 20，//长度宽度3360 10，//宽度半径： 30，//花瓣从中心开始的半径是scale: 1，corners: 1，//花瓣圆度(0-1) color3360' # 000 '，//花瓣颜色opacity3360 0.25，rotate: //spinner的z轴(默认为200000000)class name : ' spinner '，//spinner CSS样式名Top3360' 50% '，//spinner相对于父容器顶部位于pxelefts 3360 ' 50% '。 //spinner相对于父容器Left的定位单位为px shadow: false，//花瓣是否显示阴影HW Accel 3360 false，//spinner是否启用硬件加速和高速旋转位置： '绝对' }；var Spinner=new Spinner(opts)；$(ele)。show()；var target=$(ele)[0]；spinner.spin(目标)；$.ajax({url: get_url，dataType: 'html '，success : function(data){ spinner . spin()；$(ele)。hide()；回调(数据)；} })} 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 vinputid=' BTN request ' type=' button ' value=' request data '/div在上例中，我们编写了一个函数loadajaxSpin，用于在Ajax调用开始前显示加载图标，加载数据后消失。

效果：点击后显示菊花，然后执行回调函数。