记页面加载之前的loading效果

最新推荐文章于 2024-12-03 21:41:16 发布

原创最新推荐文章于 2024-12-03 21:41:16 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css #js #jquery

js相关专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在H5页面中实现加载中动画，通过HTML、CSS和JS的配合，确保在页面数据请求完毕前显示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需求效果了。