使用ajax异步请求时显示过渡的加载滚动图片是在常用不过的事情,接下来和大家分享这个插件。
样子示例:(只有这一个样子,可以动态设置显示大小、花半数、颜色等各项参数)
注:如果需要更绚丽样式的童鞋,请继续百度吧^-^
兼容性(还是很好的)
使用方法:
1、只需要引入spin.js即可(可在本人的资源中免费下载哦)。
2、添加配置参数:
<span style="font-size:18px;">var opts = { lines: 10, // 花瓣数目 length: 5, // 花瓣长度 width: 2, // 花瓣宽度 radius: 6, // 花瓣距中心半径 corners: 1, // 花瓣圆滑度 (0-1) rotate: 0, // 花瓣旋转角度 direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针 color: '#444', // 花瓣颜色 speed: 1, // 花瓣旋转速度 trail: 60, // 花瓣旋转时的拖影(百分比) shadow: false, // 花瓣是否显示阴影 hwaccel: false, //spinner 是否启用硬件加速及高速旋转 className: 'spinner', // spinner css 样式名称 zIndex: 2e9, // spinner的z轴 (默认是2000000000) top: '4%', // spinner 相对父容器Top定位 单位 px,也可以是auto left: '56%'// spinner 相对父容器Left定位 单位 px<span style="font-family: Arial, Helvetica, sans-serif;">,也可以是auto</span> };</span>
3、将opts进行初始化
<span style="font-size:18px;">var spinner = new Spinner(opts);</span>
4、在ajax进行实战
首先说明显示和隐藏的方法:
<pre name="code" class="javascript"><span style="font-size:18px;">var target=document.getElementById("showRefLoading");//放到的位置 //显示加载图 spinner.spin(target); //关闭spinner spinner.spin();</span>
完整ajax例子
<span style="font-size:18px;">$.ajax({ type: "POST", url: url, data: params, dataType: "json", beforeSend: function () { //target为显示spiner的父容器 <span style="background-color: rgb(255, 255, 102);">var target=document.getElementById("showRefLoading");</span> <span style="background-color: rgb(255, 255, 51);">spinner.spin(target); </span> }, success: function(result){</span>
<span style="font-size:18px;"><span style="white-space:pre"> </span>//成功的处理逻辑 //关闭spinner <span style="white-space:pre"> </span>spinner.spin(); }, eroor: function(){ console.log("load error!"); //关闭spinner <span style="white-space:pre"> </span>spinner.spin(); } });</span>
最后分享(亲测很卡)
Spin.js 的在线设计、演示及下载地址为:http://fgnass.github.io/spin.js/
Spin.js 的扩展性也是很强的,可以下载其源码进行修改和扩展,这里是Spin.js 的讨论区 https://github.com/fgnass/spin.js/issues