vue/react 第一次前端加载动画

最新推荐文章于 2024-04-14 23:15:58 发布

般若amq

最新推荐文章于 2024-04-14 23:15:58 发布

阅读量656

点赞数

分类专栏：前端优化文章标签： reactjs vue.js javascript

本文链接：https://blog.csdn.net/u013795975/article/details/114588875

版权

前端优化专栏收录该内容

2 篇文章 1 订阅

订阅专栏

第一次加载工程代码的时候，即使使用了gzip压缩，还是有几百KB的js，加载还是需要一定的时间，为了客户体检，就加了一个前端的等待页面，代码如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>XXX系统</title>
	<meta name="renderer" content="webkit">
    <meta name="renderer" content="ie-comp"> 
    <meta name="renderer" content="ie-stand">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #Loading {
            top : 50%; 
            left:50%;
            position: absolute;
            -webkit-transform: translateY(-50%) translateX(-50%); 
            transform: translateY(-50%) translateX(-50%); 
            z-index :100;
            }
            @-webdt-keyframes ball-beat {
                20%{
                    opacity: 0.2;
                    -webkit-transform: scale(0.75); 
                    transform: scale(0.75); }
                40%{
                    opacity: 0.4;
                    -webkit-transform: scale(0.75); 
                    transform: scale(0.75); }
                60%{
                    opacity: 0.6;
                    -webkit-transform: scale(0.75); 
                    transform: scale(0.75); }
                80%{
                    opacity: 0.8;
                    -webkit-transform: scale(0.75); 
                    transform: scale(0.75); }
                100% {
                    opacity: 1;
                    -webkit-transform:scale(1);
                    transform:scale(1);} 
            } 
            @keyframes ball-beat {
                20%{
                    opacity: 0.2;
                    -webkit-transform: scale(0.75); 
                    transform: scale(0.75); }
                40%{
                    opacity: 0.4;
                    -webkit-transform: scale(0.75); 
                    transform: scale(0.75); }
                60%{
                    opacity: 0.6;
                    -webkit-transform: scale(0.75); 
                    transform: scale(0.75); }
                80%{
                    opacity: 0.8;
                    -webkit-transform: scale(0.75); 
                    transform: scale(0.75); }
                100% {
                    opacity: 1;
                    -webkit-transform:scale(1);
                    transform:scale(1);} 
            }
            .ball-beat > div { 
                background-color: #279fcf; 
                width: 10px;
                height: 10px; 
                border-radius: 100% !important; 
                margin: 2px;
                -webkit-animation-fill-moae: both; 
                animation-fill-mode: both; 
                display: inline-block;
                -webkit-animation: ball-beat 1.25s 0s infinite linear; 
                animation: ball-beat 1.25s 0s infinite linear; 
            }
            .ball-beat > div:nth-child(1) {
                -webkit-animation-delay: -1s !important; 
                animation-delay: -1s !important;
            }
            .ball-beat > div:nth-child(2) {
                -webkit-animation-delay: -0.75s !important; 
                animation-delay: -0.75s !important;
            }
            .ball-beat > div:nth-child(3) {
                -webkit-animation-delay: -0.5s !important; 
                animation-delay: -0.5s !important;
            }
            .ball-beat > div:nth-child(4) {
                -webkit-animation-delay: -0.25s !important; 
                animation-delay: -0.25s !important;
            }
            .ball-beat > div:nth-child(5) {
                -webkit-animation-delay: 0s !important; 
                animation-delay: 0s !important;
            }
    </style>
</head>
<body>
    <!-- 增加一个加载js的动画效果 -->
    <div id="Loading">
        <div class="loader-inner ball-beat">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div id='root'></div>
</body>
</html>

然后再在app.js里面在加载完成之后，删除这个dom

componentDidMount(){
        let ele = document.getElementById('Loading');
        if(ele){
            document.body.removeChild(ele);
        }
    }

然后就OK了

般若amq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue/react 第一次前端加载动画

第一次加载工程代码的时候，即使使用了gzip压缩，还是有几百KB的js，加载还是需要一定的时间，为了客户体检，就加了一个前端的等待页面，代码如下：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
复制链接

扫一扫