Vue之动态Loading

Vue-loading根据主页img判断是否显示，以此解决vue首次加载白屏时间较长的尴尬

在vue项目中，文件打包后的在第一次访问时会出现较长的白屏等待时间，对于访问者来说非常不友好。

除了数据压缩，结构优化外，最简单的应该就是在FP（First Paint）设置一个loading动画，来更好的过渡这段尴尬时间

<div id="fv_loading" v-show="showfv">
 
    <div class="fv_loadingBorder2"><div class="fv_loadingBorder3"><div class="fv_loadingBorder"></div></div></div>  
 
    <div class="fv_bounce">
 
            <span class="fv_letter"><br><br><br>C</span>
 
            <span class="fv_letter"><br><br><br>t</span>
 
            <span class="fv_letter"><br><br><br>r</span>
 
            <span class="fv_letter"><br><br><br>l</span>
 
            <span class="fv_letter"><br><br><br>C</span>
 
            <span class="fv_letter"><br><br><br>V</span>
 
            <span class="fv_letter"><br><br><br>e</span>
 
            <span class="fv_letter"><br><br><br>r</span>
 
    </div>
 
 </div>
<div class="home-hero-img" :class="{'home-hero-img-custom ': isHome}" id="home-hero-img">
 
  <img :src="getHeroImg" @load="swhcyx">
 
</div>
在mounted周期里面调用this.swhcyx()
let _this = this
    _this.showfv= false

fv_loading为首页加载代码块，设置v-show=“showfv”，默认为true，当进入页面时便会自动加载loding动画
给img标签加上load函数来控制showfv的值，这样当首页img加载完成后，执行load函数swhcyx（），将showfv的值置为false，loading动画display：none；主页也已经加载完毕。

首页加载loading，bgimg加载完成后loading ----display：none

在想要添加的界面中插入loading即可，或者注册为组件引用

在app.vue中引入则在所有界面中都有loading。 ps:不采用定时的方法是因为这样每次返回首页时就会加载loading，即使本地浏览器已经缓存网站。根据img是否load方法第一次加载图片会出现loading，此时浏览器已经缓存图片，再次进入首页几乎不会出现loading动画，有也是非常短。

ps:不采用定时的方法是因为这样每次返回首页时就会加载loading，即使本地浏览器已经缓存网站。根据img是否load方法第一次加载图片会出现loading，此时浏览器已经缓存图片，再次进入首页几乎不会出现loading动画，有也是非常短。