原文地址: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. 对Spring <context:annotation-config/>的理解

    在基于主机方式配置Spring的配置文件中,你可能会见到<context:annotation-config/>这样一条配置,他的作用是向 Spring 容器注册 AutowiredAnn ...

  2. [SAP ABAP开发技术总结]IDoc

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. Fiddler界面详解

    Statistics 页签 完整页签如下图: Statistics 页签显示当前用户选择的 Sessions 的汇总信息,包括:选择的 Sessions 总数.发送字节数.接收字节数.响应类型的汇总表 ...

  4. Spark.ML之PipeLine学习笔记

    地址: http://spark.apache.org/docs/2.0.0/ml-pipeline.html   Spark PipeLine 是基于DataFrames的高层的API,可以方便用户 ...

  5. DICOM标准相关资料

    由于需要阅读影像,对DICOM需要先熟悉起来.关于DICOM,找了一些资料,可以学习.如下: DICOM标准:http://dicom.nema.org/standard.html 中文 DICOM ...

  6. BUAA & ICT 夏令营之旅

    我还只有二十几岁,总应该相信点什么吧. ================================ 7.10午后坐火车赶到北京.一路上火车行驶在茫茫云海里.车窗外的世界是这样子的:一片广袤的原野 ...

  7. js中event.keyCode用法及keyCode对照表

    HTML 用户名:<input type="text" id="UserAccount" onKeyPress="JumpByEnter(Use ...

  8. Scala的Actor模式 & Akka框架

    今天学Spark的时候,看到Scala的actor模式是一个加分点.所以搜了一下,看了.主要参考下面两篇文章,还没有实验,有些地方领会的不深刻: http://nxlhero.blog.51cto.c ...

  9. Android网络编程系列 一 TCP/IP协议族

    在学习和使用Android网路编程时,我们接触的仅仅是上层协议和接口如Apache的httpclient或者Android自带的httpURlconnection等等.对于这些接口的底层实现我们也有必 ...

  10. Android Netty框架的使用

    Netty框架的使用 1 TCP开发范例 发送地址---192.168.31.241 发送端口号---9223 发送数据 { "userid":"mm910@mbk.co ...