鍍金池/ 問答/數(shù)據(jù)分析&挖掘  HTML/ Vue 加載js過長時，給頁面如何加loading?

Vue 加載js過長時，給頁面如何加loading?

  1. 使用ElementUI的loading；
  2. 希望在js加載之前l(fā)oading開始，js加載之后頁面渲染完畢關(guān)閉loading
  3. 開始和關(guān)閉各放在哪里？
回答
編輯回答
尕筱澄

@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，謝謝

2017年7月4日 07:46
編輯回答
神經(jīng)質(zhì)

loading組件也是用js去控制的，js沒加載你拿什么去控制？
你這應該是頁面性能優(yōu)化的問題，可以做成路由懶加載。

2017年3月7日 08:37
編輯回答
淺時光

一般情況下，只有在獲取數(shù)據(jù)的時候才會出現(xiàn)部分頁面加載時間過長，比如在列表頁：發(fā)出請求之前this.loading = true;，請求失敗或者成功，this.loading = false。

2017年11月10日 00:25
編輯回答
雨蝶

從渲染的角度來看，瀏覽器是邊加載便渲染，所以你可以：

  1. 在頁面最開始的地方放上一個加載動畫，確保它的樣式在 <head> 里面
  2. 然后把掛在應用的節(jié)點放在它的后面，并且隱藏
  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>
2018年4月18日 22:26