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

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

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

 

<template>

    <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" :style="getHomeHeight">

    <div class="home-hero-img" :class="{'home-hero-img-custom ': isHome}" id="home-hero-img">

      <img :src="getHeroImg" @load="swhcyx">

    </div>
  </div>

</template>

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

swhcyx(){

let _this = this
    _this.showfv= false

},

​
在mounted周期里面调用this.swhcyx()
​
 

 

 

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

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

在app.vue中引入则在所有界面中都有loading。

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

这是我的解决方法，分享一下。可能解决不了你的问题但谢谢阅读！