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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章