为大家分享一个 Ajax Loading —

我们在做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/

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

为大家分享一个 Ajax Loading —— spin.js的更多相关文章

为大家分享一个 Ajax Loading —— spin.js（转）
原文地址:http://www.cnblogs.com/lxblog/p/3425599.html 我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Load ...
分享一个延迟加载图片的JS
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
福利到~分享一个基于jquery的智能提示控件intellSeach.js
一.需求我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
spin.js无图片实现loading进度条,支持但非依赖jquery
特点: 1.无图片,无外部CSS 2.无依赖(支持jQuery,但非必须) 3.高度可配置 4.分辨率无关 5.旧版本IE不支持时,采用VML支持 6.使用关键帧动画,采用setTimeout() 7 ...
分享一个手机端好用的jquery ajax分页类
分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...
分享一个快速设置背景的js 自动获取背景图的长宽
我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽自动获取背景图的长宽 : <div class="wrap"> ...
Git.Framework 框架随手记-- 分享一个"比较垃圾"的项目
本文主要分享一个Git.Framework 开发的一个项目的部分源码,此项目代码"比较垃圾",所以请各位码农,码畜,码神,码圣勿喷!发此文只为记录工作问题以及分享问题! 一. 项目 ...
利用jquery+iframe做一个ajax上传效果
以下是自学it网--中级班上课笔记网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
分享一个自己写的MVC+EF “增删改查” 无刷新分页程序
分享一个自己写的MVC+EF “增删改查” 无刷新分页程序一.项目之前得添加几个组件artDialog.MVCPager.kindeditor-4.0.先上几个效果图. 1.首先建立一个数 ...

随机推荐

Maven（一）环境搭建
网上已经有很多Maven学习的笔记和文章了,但是不自己亲自玩一玩,踩踩坑,证明不了自己到底能不能搞定它! 今天自己亲自搭建了一下环境,感觉基本的使用应该是可以满足了. 使用背景: 安装环境:Windo ...
Android ListView ArrayAdapter 的简单使用
前面写了3篇关于android的文章,其中的演示程序都写在了一个工程中,当时为了方便测试就在启动页MainActivity中放了3个按钮,点击不同的按钮进入不同的示例程序页面,MainActivity ...
Linux命令：查看登录用户
查看所有用户: # w 查看当前用户: # who am i 结束用户进程:# pkill -9 -t pts/0
CoreData数据库迁移的操作
CoreData数据库迁移操作步骤,操作是基于Xcode7. 1.添加新的数据库.选中当前数据库版本:Editor->Add Model Verson,创建一个新的数据库版本. 2.Comman ...
zju3547
题意:给出n(1<=n<=10^8),求小于n的,求所有与n互质的数字的四次幂的加和是多少. 分析:容斥原理首先要知道四次幂求和公式,1^4+2^4+...+n^4=n*(n+1)*(2 ...
thinkphp中模板继承
模板继承是3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局), ...
抓包工具Fiddler的使用
Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发 ...
LA3027 合作网络-并查集压缩路径
有N个结点一次 I u v 操作表示把结点u的父结点设为v,距离为|u-v|%1000.输入保证执行指令前u没有父结点一次E u 操作表示询问u到根结点的距离 O操作表示结束 #include&l ...
使用VAssistX给文件和函数添加注释-2015.12.31
在Visual Studio使用VAssistX助手可以非常方便的给文件和函数添加注释,增加更多的记录信息,从而方便在时间久后,对代码阅读理解的提示,以及别人后续对代码的维护和BUG修改. 添加头文件 ...
POJ 2785
4 Values whose Sum is 0 Time Limit: 15000MS Memory Limit: 228000K Total Submissions: 14475 Accep ...