为大家分享一个 Ajax Loading —— spin.js

我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Loading ,以便增加用户体验。

今天在网上发现了一个 Spin.js ,该 js 脚本压缩后5k,可以不用任何图片,任何外部的CSS样式,就可以创建一个Ajax Loading 指示器,且兼容以下浏览器:

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

我们可以在链接页面中,动态设置样式同时会自动生成样式的配置脚本:

Spin.js 用法极其的简单:

显示 spinner

//target为显示spiner的父容器
var target=document.getElementById("id")
spinner.spin(target);

隐藏 spinner
 spinner.spin();

我们来做一个简单完整的例子,来体验一次吧: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax Loading Demo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <!--原版压缩spin.js-->
    <script type="text/javascript" src="js/spin.min.js" ></script>   
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">        
        //opts 可从网站在线制作
        var opts = {            
            lines: 13, // 花瓣数目
            length: 20, // 花瓣长度
            width: 10, // 花瓣宽度
            radius: 30, // 花瓣距中心半径
            corners: 1, // 花瓣圆滑度 (0-1)
            rotate: 0, // 花瓣旋转角度
            direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
            color: '#5882FA', // 花瓣颜色
            speed: 1, // 花瓣旋转速度
            trail: 60, // 花瓣旋转时的拖影(百分比)
            shadow: false, // 花瓣是否显示阴影
            hwaccel: false, //spinner 是否启用硬件加速及高速旋转            
            className: 'spinner', // spinner css 样式名称
            zIndex: 2e9, // spinner的z轴 (默认是2000000000)
            top: 'auto', // spinner 相对父容器Top定位 单位 px
            left: 'auto'// spinner 相对父容器Left定位 单位 px
        };
var spinner = new Spinner(opts); $(document).ready(function () { $("#btnRequest").bind("click", function () { ajaxRequestData(); }) }) function ajaxRequestData(){ $.ajax({ type: "POST", timeout: 10000, dataType: "text", url: "Index.ashx", beforeSend: function () { //异步请求时spinner出现 $("#firstDiv").text(""); var target = $("#firstDiv").get(0); spinner.spin(target); }, success: function (msg) { $("#firstDiv").text(msg); //关闭spinner spinner.spin(); }, error: function (e, jqxhr, settings, exception) { $("#firstDiv").text("请求发生错误..."); //关闭spinner spinner.spin(); } }) } </script> </head> <body> <div id="firstDiv"> </div> <div id="secondDiv"> <input id="btnRequest" type="button" value="请求数据" class="btnStyle" /> </div> </body> </html>

 点击“请求数据”按钮,效果如下图所示:

Spin.js 的扩展性也是很强的,可以下载其源码进行修改和扩展,这里是Spin.js 的讨论区 https://github.com/fgnass/spin.js/issues

比如可将Spin.js 扩展成中间显示网站的logo,如下图所示:

 代码十分的简单,好了,话不多说,另外再给大家提供一个在线设计 ajax loading gif 的网址:http://www.ajaxload.info/

-==本文源码下载==- 

posted @ 2013-11-15 16:06 Rising_Sun 阅读(...) 评论(...) 编辑 收藏