Vue 加载js过长时,给页面如何加loading?

沉睡の黑暗
  • 293
  1. 使用ElementUIloading
  2. 希望在js加载之前loading开始,js加载之后页面渲染完毕关闭loading
  3. 开始和关闭各放在哪里?
回复
阅读 12.1k
4 个回答
✓ 已被采纳

从渲染的角度来看,浏览器是边加载便渲染,所以你可以:

  1. 在页面最开始的地方放上一个加载动画,确保它的样式在 <head> 里面
  2. 然后把挂在应用的节点放在它的后面,并且隐藏
  3. Vue 及其它 JS 完成加载后,移除 #loading,并且显示 #app
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/path/to/loading/css>
</head>
<body>
<div id="loading"></div>
<div class="hide" id="app"></div>
<script src="/path/to/js"></script>
</body>
</html>

一般情况下,只有在获取数据的时候才会出现部分页面加载时间过长,比如在列表页:发出请求之前this.loading = true;,请求失败或者成功,this.loading = false。

@tombear 谢谢,这个文章确实不错,改下:
index.html或其他类型的首页

<!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>

App.vue中加入:

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

OK,谢谢

loading组件也是用js去控制的,js没加载你拿什么去控制?
你这应该是页面性能优化的问题,可以做成路由懒加载。

宣传栏