为大家分享一个 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 ...
- 分享一个延迟加载图片的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.首先建立一个数 ...
随机推荐
- Jquery中的bind(),live(),delegate(),on()绑定事件方式
博客转载为作者:枫上善若水http://www.cnblogs.com/xilipu31/p/4105794.html 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到d ...
- jquery $.each终止本次循环
1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each则对应的使用return true 进入下一个循环,return ...
- 数据库 sql server
1. if exists(select * from sys.objects where name='test') drop table test go create table test ( id ...
- SQL Server 事务、异常和游标
转自:http://www.cnblogs.com/hoojo/archive/2011/07/19/2110325.html Ø 事务 在数据库中有时候需要把多个步骤的指令当作一个整体来运行,这个整 ...
- 使用sklearn优雅地进行数据挖掘
目录 1 使用sklearn进行数据挖掘 1.1 数据挖掘的步骤 1.2 数据初貌 1.3 关键技术2 并行处理 2.1 整体并行处理 2.2 部分并行处理3 流水线处理4 自动化调参5 持久化6 回 ...
- 《JAVA与模式》之抽象工厂模式
场景问题 举个生活中常见的例子——组装电脑,我们在组装电脑的时候,通常需要选择一系列的配件,比如CPU.硬盘.内存.主板.电源.机箱等.为讨论使用简单点,只考虑选择CPU和主板的问题. 事实上,在选择 ...
- nim的引用和指针
nim语言的引用和其他语言的指针有点相似 可以提供一种“多对一”的关系 这就意味着不同的引用可以指向同一个内存位置 nim区分可被追踪的引用和不可被追踪的引用 不可被追踪的引用又称为指针 可被追踪的引 ...
- 从scrapy使用经历说开来
关于scrapy这个Python框架,萌萌的官网这么介绍: An open source and collaborative framework for extracting the data you ...
- 【BZOJ-2055】80人环游世界 上下界费用流 (无源无汇最小费用最大流)
2055: 80人环游世界 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 321 Solved: 201[Submit][Status][Discus ...
- js null和undefined
在JavaScript开发中,被人问到:null与undefined到底有啥区别? 一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理. 总所周知:null == un ...