前端loading

<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');


猜你喜欢

转载自blog.csdn.net/weixin_40159375/article/details/78079141