很多时候我们获取后台数据时页面在为返回任何数据时，给用户的体验效果并不好，一般都是给页面天一个效果，如下图：
当数据完全返回时，再让它消失，那么是怎么做的呢？直接上代码。。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .foruser{ position: relative; } .yb-zhezhao{ position: absolute; left:0; top:0; width: 100%; height:100%; line-height: 100%; background: #fff; text-align: center; } .yb-zhezhao i{ margin-top: 1.5rem; } .con{ width: 100%; height: 500px; } </style> </head> <body> <div class="foruser"> <div class="yb-zhezhao"> <i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i> <span>加载中...</span> </div> <div class="con"></div> </div> <script src="jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> loading(); //loading function loading() { $.ajax({ url: 'http://api.jtzk.com/api/Base/GetNewsAdvertisement', type: 'POST', async: false, data: { "TopNum": 5, "Token": "B926E78B1A214CF193EF544ADF808251", }, success: function(response) { if (response.Result == 200) { //接口调取成功，关闭浮动层 _loading(); }; }, error: function(e) { console.log('error'); } }); } //关闭loading function _loading() { $(".yb-zhezhao").hide(); } </script> </body> </html>
样式是引得图标库里的，ajax 当然要改成自己的，还有别忘了引jq,嗯，没啦，so easy~