随笔：简单的蒙版加载页面实现

html

---

    <div id="loading" style="display: none">
        <div class="loading" >
            <div class="ldl_Conten">
                <img src="/resources/images/loading-lo.gif"/>
                <p>加载中请稍后</p>
            </div>
        </div>
        <div id="floatLayer" class="floatLayer" ></div>
    </div>

css：

---

/**
遮挡层
 */
.floatLayer{
    width:100%;
    height:100%;
    position:fixed;
    background:#53799f;
    z-index:9990;
    top:0rem;
    left:0rem;
    filter:alpha(Opacity=50);
    -moz-opacity:0.50;
    opacity: 0.50;
}
/** 等待样式*/
.loading{
    width:100%;
    height:auto;
    position:absolute;
    top:45%;
    left:auto;
    z-index:9995;
}
.ldl_Conten{
    width:31.25rem;
    height:6.25rem;
    line-height:6.25rem;
    overflow:hidden;
    text-align:center;
    position:absolute;
    left:45%;
}
.ldl_Conten img{
    width:3.75rem;
    height:1.25rem;
    line-height:6.25rem;
    display:block;
    float:left;
    margin:2.4375rem 0.3125rem;
    background-size:3.75rem 1.25rem;
    filter:chroma(color=#ffffff);
}
.ldl_Conten p{
    width:auto;
    height:auto;
    font-size:1.25rem;
    height:6.25rem;
    line-height:6.25rem;
    color:white;
    display:block;
    float:left;
}

js：

---

页面加载之前写 $('#loading').show();

页面加载之后写   $('#loading').hide();