vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

1. 创建 loading 公用组件

<template>
  <div class="load-container">
    <div class="load"></div>
    <div class="text">加载中...</div>
  </div>
</template>

<script>
export default {
  name: 'Loading',
}
</script>

<style scoped >
  .load-container .load {
    width: 60px;
    height: 60px;
    background-color: #1e8fc6;
    margin: 50px auto;
    animation: rotateplane 1.2s infinite ease-in-out;
  }

  .load-container .text {
    text-align: center;
  }

  @keyframes rotateplane {
    0% {
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    } 50% {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    } 100% {
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  } 
</style>

loading效果如下：

需要在 login.vue 页面背景图完全加载完成之前显示上面的loading效果

2. login.vue 页面

<template>
  <div>
    <div class="loading-wrapper" v-show="showLoading">
      <Loading></Loading>
    </div>
    <div class="login-wrapper" v-show="!showLoading">
      <img :src="imgUrl" alt="" width="100%" height="100%">
      <div class="login">
        首页内容
      </div>
    </div>
  </div>
</template>

<script>
import Loading from '@/components/loading/Loading.vue'
export default {
  name: 'Login',
  components: {
    Loading
  },
  data() { 
    return {
      showLoading: true, // 显示loading
      imgUrl: require('../../assets/images/bg-img.jpg')  // 背景图片地址
    }
  },
  mounted () {
    let bgImg = new Image()
    bgImg.src = this.imgUrl // 获取背景图片的url
    bgImg.onerror = () => {
      console.log('img onerror')
    }
    bgImg.onload = () => { // 等背景图片加载成功后 去除loading
      this.showLoading = false
    }
  },
  methods: {
  
  }
}
</script>
<style scoped>
.loading-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #aedff8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.login-wrapper img {
  position: absolute;
  z-index: 1;
}
.login {
    max-width: 340px;
    margin: 60px auto;
    background: #fff;
    padding: 20px 40px;
    border-radius: 10px;
    position: relative;
    z-index: 9;
} 
</style>

转载于:https://www.cnblogs.com/cckui/p/10346016.html