为AJAX添加等待效果(spin.js)

在WEB开放中,如果使用了AJAX,那么如果服务器不能马上返回结果,希望能有个等待的东西来提示用户。

spin.js就是专门用来实现等待的效果,一个效果图如下:

它主要有以下特点

  • 非图片和CSS的扩展
  • 不需要额外的依赖(如jQuery)
  • 能自由的配置效果
  • 能在绝大多数浏览器下运行(包括IE6)

代码示例

为了方便使用,以及加上一层遮罩层来更好的让用户明白程序没有死掉,此时需要等待,

我们可以写出如下的JS代码(loading-control.js),调用方式为:

  • loading_control.start()  //开始等待,并且创建了一个透明的遮罩层和使用了spin.js等待效果
  • loading_control.stop()  //停止等待,遮罩层设为隐藏和并停用spin.js等待效果

 

使用例子1

假设我们是点击按钮,然后采用AJAX与服务器进行交互(下面的代码假设两秒钟),然后之后停止等待效果。

这个例子的目的是方便测试,用到了JS版本的time.sleep,详情见stackoverflow JS版本的time.sleep

 

使用例子2

下面是真实的ajax例子:

 

小结

本文简单的介绍spin.js,并且给了demo,

spin.js的地址为http://fgnass.github.io/spin.js/

 

 

本博客若无特殊说明则由 hrwhisper 原创发布
转载请点名出处:细语呢喃 > 为AJAX添加等待效果(spin.js)
本文地址:https://www.hrwhisper.me/spin-js-loading-effect/

您的支持将鼓励我继续创作!

OtherCodes, WEB前端 . permalink.

One thought on “为AJAX添加等待效果(spin.js)

Leave a Reply

Your email address will not be published. Required fields are marked *