记页面加载之前的loading效果

znbb_

墨衍会员 · AI 创作全网分发码龄9年

关注

原创最新推荐文章于 2025-08-12 11:34:17 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

Vue实现网页首屏加载动画、页面内请求数据加载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 auto;
    animation: load 1s linear 0s infinite;
    -webkit-animation: load 1s linear 0s infinite;
}

@-webkit-keyframes load {
    0%{ transform: rotate(0deg)}
    100%{ transform: rotate(360deg)}
}
@keyframes load {
    0%{transform: rotate(0deg)
    }
    100%{transform: rotate(360deg);
    }
}

注：定义旋转动画，1s转一圈

3.js部分的逻辑

part1:在页面内资源加载准备完成显示主体内容
<script>
    completeLoading();
    document.onreadystatechange = completeLoading;
    function completeLoading() {
        if (document.readyState == "complete") {
            $(".mask").hide();
           $('.wrap').show();
        }
    }
</script>

part2:在ajax请求成功数据渲染之前显示loading，或在某些需要和后端post数据交互的时候使用

beforeSend:function(){
    $('.mask').show();
},

或：

post某个操作，点击按钮更新或保存数据等

$('.mask').show();

交互完成提示成功或失败后 $('.mask').hide();

注：在ajax发送请求之前的设置。要记得在success函数或其他适当的时候 $('.mask').hide();

好了，这样简单的几步就可以完美实现loading需求效果了。

收录于

js相关

标签

#前端 #html #css #js #jquery

本内容遵循 CC 4.0 BY-SA 版权协议

vue项目未加载完成前显示loading样式 1、在index.html中添加元素和绑定样式 <body> <div id="appLoading"> <div class='loading'></div> </div> <div id="app" style="display: none"></div> </body> <style media="screen" type="text/css"> 阅读详情

记页面加载之前的loading效果

相关推荐