原文地址:http://www.cnblogs.com/lxblog/p/3425599.html

我们在做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();

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

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

    我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Loading ,以便增加用户体验. 今天在网上发现了一个 Spin.js ,该 js 脚本压缩后5k,可以 ...

  2. Loading——spin.js

    官网:[http://spin.js.org/] Github地址:[https://github.com/fgnass/spin.js]

  3. 分享一个延迟加载图片的JS

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 分享一个tom大叔的js 深入理解系列 (有助于提升)

    http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html#3620172

  5. 使用spin.js优化等待ajax返回时的页面效果

    [本文出自天外归云的博客园] 最近在做一个JIRA信息统计的系统,在统计JIRA关联信息的过程中由于需要等待ajax返回结果到前端,时间较长,所以要添加一段等待时的loading画面,使用spin.j ...

  6. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  7. spin.js无图片实现loading进度条,支持但非依赖jquery

    特点: 1.无图片,无外部CSS 2.无依赖(支持jQuery,但非必须) 3.高度可配置 4.分辨率无关 5.旧版本IE不支持时,采用VML支持 6.使用关键帧动画,采用setTimeout() 7 ...

  8. 分享一个手机端好用的jquery ajax分页类

    分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...

  9. 分享一个快速设置背景的js 自动获取背景图的长宽

    我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...

随机推荐

  1. 6.mybatis异常:SQL Mapper Configuration,Error parsing Mapper XML,Could not resolve type alias

    在xxxMapper中 <select id="getClazz" parameterType="int" resultType="getCla ...

  2. STORM_0001_用vmware拷贝出三个相同的ubuntu搭建小的zookeeper集群

    第一次配置zookeeper的集群 因为想运行storm必须搭建集群在自己的电脑上拷贝了自己的ubuntu虚拟机采用的是vmware给虚拟机分配的地址三个机器的配置基本上一样除了myid这个文件看了这 ...

  3. 2dx中文乱码问题

    我们的代码里面有一个bug 为了跟之前兼容的策划导表工具兼容 导表工具导出的excel全部都是ansi的 为了兼容就只能手动改成utf 8 无bom格式 后来策划嫌烦了 就让在程序段处理这个 研究了好 ...

  4. C#开发Activex控件(1)

    项目结构 创建Activex步骤: 1.选择创建类别(Windows 控件库或类库) 2.设置对应的com属性 AssemblyInfo.cs中须做以下设置:a.引入命名空间:using System ...

  5. [转]十款提高开发效率的PHP编码工具

    1 . PHPUnit 测试在软件开发中是相当重要的一环,但很多开发者都只是给予很少的时间去测试,因为这工作的确相当耗时,枯燥并且容易出错.为了解决以上问题,自动化测试工具能让开发者编写一系列测试脚本 ...

  6. Android Studio常见问题 -- AndroidManifest.xml 覆盖问题

    问题如下 D:\source-code\AndroidStudio\MyApplication\app\src\main\AndroidManifest.xmlError:(14, 9) Attrib ...

  7. oracle学习之bulk collect用法

    通过bulk collect减少loop处理的开销,使用Bulk Collect提高Oracle查询效率 Oracle8i中首次引入了Bulk Collect特性,该特性可以让我们在PL/SQL中能使 ...

  8. oracle 查看锁表情况并处理锁表

    /* *locked *query locked object and analyse reason,kill it * */ select 'alter system kill session '' ...

  9. Reactivecocoa初级使用

    一直听闻ReactiveCocoa(以下简称RAC)的大名,但始终没有使用.最近时间比较空闲就决定研究一下. 在配置RAC时候遇到了一个小麻烦需要说明本人用cocoapods管理第三方框架,于是按照正 ...

  10. bootstrap学习笔记<五>(表单一)

    表单 bootstrap为表单提供三种样式:默认表单,水平表单,内联表单. <form class="form-horizontal" role="form&quo ...