前端向后端请求，的一个加载页面

Question

前端向后端发请求，这个请求需要几秒才返回。这几秒前端友好的显示转圈圈，或者提示怎在处理。真正处理完成后。圈圈消失。怎么做？

Answer 1

显示一个遮盖层就行

<style>
    #loadbox {
        background: rgba(0,0,0,.6) url(https://www.w2trip.com/content/static/image/preloader.gif) center no-repeat;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99999999999;
        transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        -webkit-transition: .3s;
        display: none
    }
</style>
<div id="loadbox"></div>
<input type="button" onclick="sendajax()" value="Send Ajax"/>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    //注册ajax事件，发送前显示遮盖层，完毕后隐藏，注意如果使用$.ajax配置过下面2个事件，要在配置的事件中加入下面2句对应语句
    //因为会覆盖setup设置的事件导致无法显示或隐藏
    $.ajaxSetup({ beforeSend() { $('#loadbox').show() }, complete() { $('#loadbox').hide() } });
    function sendajax() {
        $.ajax({
            url: 'http://www.w3dev.cn/delay10s.ashx',
            success: function (s) { alert(s)}
        });
    }
</script>