记页面加载之前的loading效果

最近做H5页面，内嵌到安卓端的APP内，需求是要在页面所有数据请求完毕之前显示loading图标提示用户等待，因为在手机端的网速很大程度上是不确定的，loading等待在用户体验度上确实比较友好。

话不多说，结合代码直接看效果

1.HTML结构部分
<div class="mask" id="mask_id">
    <div class="mask_loading">
        <img src="../common/img/loading.png" alt="">
    </div>
</div>

注：此png的loading效果图是来自安卓的静图，不要问我为啥不是个gif图，因为安卓带有进度条的progress控件，好吧，那就自己css动画--->静图转起来！！！

2.css样式

.mask{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    background-color: rgba(0,0,0,.2);
    display: table;
}
.mask .mask_loading{
    display:table-cell;
    text-align: center;
    vertical-align: middle;
    z-index: 999;
    color: #3673BB;
   font-size:0.14rem;
}
.mask .mask_loading img{
    display:block;
    margin:0 aut