Vue防止白屏添加首屏動畫

單頁應(yīng)用有個無法避免的問題就是首屏加載慢,雖然可以通過<font color=red>gzip雾消、路由懶加載、CDN挫望、提高服務(wù)器帶寬</font>等手段立润,首屏加載速度仍然比傳統(tǒng)多頁應(yīng)用慢一些。

為了提高用戶體驗媳板,首屏添加loading動畫很有必要桑腮,并且實現(xiàn)特別簡單。

vue-cli3生成的項目中拷肌,打開index.html會發(fā)現(xiàn)如下代碼

<body>
  <noscript>
    <strong>We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

</body>

我們只需要在這個div中插入loading代碼即可,vue初始化完成后會自動替換

<div id="app">此處插入loading代碼</div>

以下是我實現(xiàn)的一種動畫效果到旦,可自行替換

image
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <link rel="stylesheet" type="text/css" >
  <title>demo</title>
  <style>
    .spinner {
      margin: 100px auto;
      width: 50px;
      height: 60px;
      text-align: center;
      font-size: 10px;
    }

    .spinner > div {
      background-color: #FE3C71;
      height: 100%;
      width: 6px;
      display: inline-block;
      -webkit-animation: stretchDelay 1.2s infinite ease-in-out;
      animation: stretchDelay 1.2s infinite ease-in-out;
    }

    .spinner .rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .spinner .rect3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

    .spinner .rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .spinner .rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

    @-webkit-keyframes stretchDelay {
      0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
      }
      20% {
        -webkit-transform: scaleY(1.0)
      }
    }

    @keyframes stretchDelay {
      0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      }
      20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
      }
    }
  </style>
</head>
<body>
<noscript>
  <strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
  <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>
<!-- built files will be auto injected -->
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市巨缘,隨后出現(xiàn)的幾起案子添忘,更是在濱河造成了極大的恐慌,老刑警劉巖若锁,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件搁骑,死亡現(xiàn)場離奇詭異,居然都是意外死亡又固,警方通過查閱死者的電腦和手機仲器,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來仰冠,“玉大人乏冀,你說我怎么就攤上這事⊙笾唬” “怎么了辆沦?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵昼捍,是天一觀的道長。 經(jīng)常有香客問我肢扯,道長妒茬,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任蔚晨,我火速辦了婚禮乍钻,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘铭腕。我一直安慰自己银择,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布谨履。 她就那樣靜靜地躺著欢摄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪笋粟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天析蝴,我揣著相機與錄音害捕,去河邊找鬼。 笑死闷畸,一個胖子當(dāng)著我的面吹牛尝盼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播佑菩,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼盾沫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了殿漠?” 一聲冷哼從身側(cè)響起赴精,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎绞幌,沒想到半個月后蕾哟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡莲蜘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年谭确,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片票渠。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡逐哈,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出问顷,到底是詐尸還是另有隱情昂秃,我是刑警寧澤薯鼠,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站械蹋,受9級特大地震影響出皇,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜哗戈,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一郊艘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧唯咬,春花似錦纱注、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蜀涨,卻和暖如春瞎嬉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背厚柳。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工氧枣, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人别垮。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓便监,卻偏偏與公主長得像,于是被迫代替她去往敵國和親碳想。 傳聞我的和親對象是個殘疾皇子烧董,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 要招一個會vue的開發(fā)者: 作為面試官的你,你還會每次都只是問這些老土的問題嗎胧奔?你對MVVM的理解是什么逊移?你知道什...
    浪子神劍閱讀 23,070評論 0 260
  • 只要你是天鵝蛋,就是生在養(yǎng)雞場里也沒有什么關(guān)系葡盗。 你現(xiàn)在努力奮斗的樣子 大抵可以預(yù)見60歲后的模樣 女人永遠新鮮的...
    葉娜姐姐閱讀 346評論 3 4
  • 旅途中螟左,,觅够, 大概到江西了吧胶背,一場由南到北的征程,穿過擁擠的人潮喘先,在春運的大軍中奉獻自己的一份力量钳吟,火車上,兩個小...
    懶貓咪閱讀 166評論 0 1
  • 2018年08月11日 星期六 天氣 晴 今天是廈小暑假第二次返校日窘拯,早上6點半就帶了倆寶貝去學(xué)校红且。今天是學(xué)校...
    言書9130閱讀 441評論 1 6