<style>
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: #fff;
}
#loader {
background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat #fff;
display: block;
position: relative;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
z-index: 1001;
}
.loaded #loader {
opacity: 0;
}
.loaded #loader-wrapper {
display: none;
}
</style>
以上为前端css样式
<div class="wrapper" id="load" style="opacity: 0.8;z-index: 12;">
<div id="loader-wrapper">
<div id="loader"></div>
</div>
</div>
以上为loading 的div
JS中在js的success function中加入如下代码将loading隐藏即可
var s = document.getElementById("load");
s.style.display = 'none';
//或者:
$('.wrapper').addClass('loaded');