在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

Vue 加載js過長(zhǎng)時(shí)，給頁(yè)面如何加loading?

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

@tombear 謝謝，這個(gè)文章確實(shí)不錯(cuò)，改下：
index.html或其他類型的首頁(yè)

<!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īng)該是頁(yè)面性能優(yōu)化的問題，可以做成路由懶加載。

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

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

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

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

  1. 在頁(yè)面最開始的地方放上一個(gè)加載動(dòng)畫，確保它的樣式在 <head> 里面
  2. 然后把掛在應(yīng)用的節(jié)點(diǎn)放在它的后面，并且隱藏
  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