js spin 加载动画(loading)
2014-01-20 16:23
316 查看
js spin 加载动画
最近做页面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'
})
}
转自:/article/5573076.html
相关文章推荐
- spin.js 动画加载(含数据交换)
- Spin.js旋转的加载动画
- 关于loading加载效果的插件spin.js使用
- Spin.js-CSS动画进度加载器
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载
- 超便捷好用的-圆形花瓣加载滚动图片插件spin.js
- 【Android】应用的loading加载动画制作
- cocos2d-x游戏开发(十五)游戏加载动画loading界面
- Android加载动画系列——CircularRingLoadingAnim
- HTML5 Canvas轻松玩-----圆周运动的妙用:Loading加载动画~~
- iscroll.js listloading.js是一个移动端的上拉、下拉加载更多的组件
- 原生JS实现首页进度加载动画
- CSS3动画实现loading加载图标
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
- js 等待动画效果,利用 spin.js 生成动画等待效果
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- Lazyr.js – 延迟加载图片(Lazy Loading)
- Android 自定义View修炼-自定义加载进度动画XCLoadingImageView
- 页面预加载loading动画,再载入内容
- js图片未加载完显示loading效果