前端loading

来源:互联网 发布:巨人网络最新游戏 编辑:程序博客网 时间:2024/06/15 22:14
<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');


原创粉丝点击