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

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

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

它主要有以下特点

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

代码示例

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

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

  • loading_control.start()  //开始等待,并且创建了一个透明的遮罩层和使用了spin.js等待效果
  • loading_control.stop()  //停止等待,遮罩层设为隐藏和并停用spin.js等待效果
/**
 * Created by hrwhisper on 2016/4/25.
 */
var loading_control = {
    opts: {
        // more options: http://fgnass.github.io/spin.js/
        length: 28,
        width: 14,
        radius: 42,
        color: "#fff",
        scale: 0.5,
        opacity: 0.2,
        position: "fixed"
    },
    spinner: null,
    div_wait: null,
    div_wait_bg: null,

    start: function () {
        if (!this.div_wait) {
            var div = document.createElement("div");
            div.id = "foo";
            document.body.appendChild(div);
            this.div_wait = div;
        }

        if (!this.div_wait_bg) {
            var div = document.createElement("div");
            div.id = "waiting-bg";
            div.style.cssText = "width:100%; height:100%; background-color:#000; filter:alpha(opacity=60);-moz-opacity:0.6; opacity:0.6; position:fixed; left:0px; top:0px; display:none;  z-index:1000;";

            document.body.appendChild(div);
            this.div_wait_bg = div;
        }

        if (!this.spinner) {
            this.spinner = new Spinner(this.opts);
        }

        this.div_wait_bg.style.display = "block";
        this.spinner.spin(this.div_wait);
    },

    stop: function () {
        if(this.spinner)
            this.spinner.stop();
        this.div_wait_bg.style.display = "none";
    }
};

 

使用例子1

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

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>spin.js Demo</title>
</head>
<body>
    <script src="./spin.min.js"></script>
    <script src="./loading-control.js"></script>
    <button onclick="start_do_something()">开始</button>
	<script>
		function sleep(ms) {
		  return new Promise(resolve => setTimeout(resolve, ms));
		}

		async function start_do_something() { #AJAX
		  loading_control.start();
		  await sleep(2000);
		  loading_control.stop();
		}
	</script>
</body>
</html>

 

使用例子2

下面是真实的ajax例子:

function get_topic_result() {
    loading_control.start();
    $.ajax({
        url: 'stream_trends',
        data: userTopicParam.getParam(),
        success: function (v) {
            resultStore.update(v);
            loading_control.stop();
        },
        error: function (v) {
            console.log(v);
            loading_control.stop();
        },
        dataType: 'json'
    });
}

 

小结

本文简单的介绍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 *