zoukankan html css js c++ java

vue项目未加载完成前显示loading...

1.在Index.html里面加入loading的元素，让loading元素显示，让app元素隐藏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">
    <style media="screen" type="text/css">
       #appLoading { width: 100%; height: 100%; }
       #appLoading span {
            position: absolute;
            display: block;
            font-size: 50px;
            line-height: 50px;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 100px;
            -webkit-transform: translateY(-50%)  translateX(-50%);
            transform: translateY(-50%)  translateX(-50%);
        }
    </style>
  </head>
  <body>
    <div id="appLoading">
       <span>Loading...</span>
    </div>
    <div id="app" style="display: none">
       <app></app>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.在App.vue中加入：加载完成之后，让loading隐藏，让app元素显示

 mounted(){
        document.getElementById('app').style.display = 'block';
        document.getElementById('appLoading').style.display = 'none';
 }

3. 原理

在文档开始加载的时候显示loading

在js加载完毕后，显示app

查看全文

相关阅读:
第47课父子间的冲突
 第46课继承中的构造与析构
 第45课不同的继承方式
 3.天线-网络规划-网络优化
 2.多址技术
 断剑重铸013
断剑重铸012
断剑重铸011
1.LTE系统概述
 断剑重铸010

原文地址：https://www.cnblogs.com/cengjingdeshuige/p/10038621.html