为大家分享一个 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/
为大家分享一个 Ajax Loading —— spin.js的更多相关文章
- 为大家分享一个 Ajax Loading —— spin.js（转）
原文地址:http://www.cnblogs.com/lxblog/p/3425599.html 我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Load ...
- Loading——spin.js
官网:[http://spin.js.org/] Github地址:[https://github.com/fgnass/spin.js]
- 分享一个延迟加载图片的JS
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 分享一个tom大叔的js 深入理解系列 (有助于提升)
http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html#3620172
- 使用spin.js优化等待ajax返回时的页面效果
[本文出自天外归云的博客园] 最近在做一个JIRA信息统计的系统,在统计JIRA关联信息的过程中由于需要等待ajax返回结果到前端,时间较长,所以要添加一段等待时的loading画面,使用spin.j ...
- 福利到~分享一个基于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"> ...
随机推荐
- mysql入门安装遇到问题_2016-10-28
1. brew安装完mysql之后直接输入mysql -u root -p 显示 can't connect to mysql server through socket, 后来问题应该是server ...
- 表格里使用text-overflow后不能隐藏超出的文本的解决方法
当把text-overflow设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,不过在表格里面使用text-overflow后依旧不能隐藏超 ...
- XAF 官方问题笔记
1.How to print report direct, and print preview via an simple action? 如何通过一个按钮直接打印报表或者打印预览报表 https:/ ...
- 快速排序-java
排序-快速排序 基本思想: 将数据划分为两部分,左边的所有元素都小于右边的所有元素:然后,对左右两边进行快速排序. 划分方法: 选定一个参考点(中间元素),所有元素与之相比较,小的放左边,大的放右边. ...
- CXF实现webservice
虽然网上有很多cxf的教程,但还是要自己写写, “好记性不如烂笔头” 1.服务端 1.1 DEMO,用于测试传递对象 package com.xq.model; import javax.persi ...
- Oracle EBS进化史
https://blogs.oracle.com/ptian/entry/oracle_ebs%E8%BF%9B%E5%8C%96%E5%8F%B2 通过图表总结了下Oracle EBS的进化历史,回 ...
- MQTT和WebSocket
严格来说,MQTT跟WebSocket关系不大.他们不是在一个层级的. MQTT和TCP.WebSocket的关系可以用下图一目了然: 参考资料: http://www.zhihu.com/q ...
- 终于解决：升级至.NET 4.6.1后VS2015生成WCF客户端代理类的问题
在Visual Studio 2015中将一个包含WCF引用的项目的targetFramework从4.5改为4.6.1的时候,VS2015会重新生成WCF客户端代理类.如果WCF引用配置中选中了&q ...
- .net程序单元测试介绍
什么是单元测试?为什么要进行单元测试?如需要进一步了解,请移步维基百科. 关于.net程序单元测试的文章,网上已经有很多,但我相信我写的这篇文章的内容是独特的,因为我在网上找了很久,都没找到关于Str ...
- 把 Notepad++ 打造成一款易用的C#脚本编辑器
以前一直用Linqpad在写小程序脚本,但是Linqpad自动完成功能要收费,且不开源,这样的话就不方便扩展了.今天在 http://csscriptnpp.codeplex.com/ 发现了一款C# ...