[笔记]让AJAX运行中跳出Loading

CSS部分

<style>    div.loadingdiv {        height: 100%;        width: 100%;        /*100%覆盖网页内容, 避免user在loading时进行其他操作*/        position: fixed;        z-index: 99999;        /*须大于网页内容*/        top: 0;        left: 0;        display: block;        background: #000;        opacity: 0.6;        text-align: center;    }    div.loadingdiv img {        position: relative;        vertical-align: middle;        text-align: center;        margin: 0 auto;        margin-top: 50vh;    }    </style>

HTML中加入此段 img 为随便一个gif档
div 的display = none 一开始设为隐藏

 <div class="loadingdiv" id="loading" style="display: none">        <img src="~/gif/load.gif" />      </div>

AJAX部分

$.ajax({          beforeSend: function () {             //将div显示             $('#loading').css("display", "");          },          type: 'GET',          async: false,          url: 自己的url,          success: function (data) {               //do something          },          complete: function () {              //再次隐藏              $('#loading').css("display", "none");                             //测试可利用setTimeout 让loading效果明显              //setTimeout(function () { $('#loading').css("display", "none"); }, 3000);                        }             })