js spin 加载动画(loading)
最近做页面ajax加载是又用到loading动画,还好有一个spin.js
具体的包大家可以去http://fgnass.github.com/spin.js/下载,
如果想在页面里出现loading动画,大家只要这么做就可以了
首先页面里要有:<div class="w-load"><div class="spin"></div></div>
一定要有一个包含.spin的标签,然后调用 洒家 定义的function,就可以了
如: smallLoadingIcon(‘.w-load‘);
具体的loading大小形状,可以自行调节。
function smallLoadingIcon(ele) { //小的loading图标
var spinner = new
Spinner({
lines: 12,
length: 5,
width: 2,
radius:
4,
color: ‘#333‘,
speed: 1,
trail: 50,
shadow:
false,
hwaccel: false,
className: ‘spinner‘,
top: 0,
left: 0
});
var target = $(ele+‘ .spin‘)[0];
spinner.spin(target);
return spinner;
}
2.///////////////
这个函数的作用是ajax调用开始前 出现loading图标,数据加载完成后loading图标消失,
function loadAjaxSpin(ele, get_url, callback){
//第一个参数为loading图标加载的标签,第二个为ajax的数据接口,第三个为回调函数。
var spinner = new
Spinner({
lines: 10,
length: 3,
width: 2,
radius:
4,
color: ‘#333‘,
speed: 1,
trail: 38,
shadow:
false,
hwaccel: true,
className: ‘spinner‘,
top:
‘auto‘,
left: ‘auto‘
});
$(ele).show();
var target =
$(ele+‘ .spin‘)[0];
spinner.spin(target);
$.ajax({
url:
get_url,
success: function (data) {
callback(data);
},
complete:function(){
spinner.stop();
//用来停止loading
$(ele).hide();
},
dataType:
‘json‘
})
}
转自:http://www.cnblogs.com/yingcaiyi/archive/2012/11/02/2750803.html
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。