vue实现图片加载完成前的loading组件方法

下面是关于“vue实现图片加载完成前的loading组件方法”的完整攻略。

1. 前置知识

在进行图片加载前的loading组件的实现之前，需要掌握以下几个知识点：
1. html中的图片标签 <img>
2. 图片加载事件 load 和 error
3. vue组件基本语法

2. 实现过程

2.1 创建loading组件

首先使用 vue-cli 快速搭建 vue 项目，然后创建一个名为 Loading 的组件。

在 Loading.vue 中，我们需要创建一个父容器（例如 <div class="loading"></div>），并在该容器中添加加载动画。这里可以使用 CSS3 的 animation 或者引入第三方库，例如 spin.js。

2.2 在图片加载完成前渲染loading组件

在使用 <img> 标签加载图片时，可以通过在组件中添加一个 data() 数据，该数据的属性值负责记录图片是否加载完成。同时，可以使用 v-if 指令来控制图片在加载完成前渲染 loading 组件，而加载完成后再渲染图片。

<template>
  <div class="image">
    <div class="loading" v-if="!isLoaded"></div>
    <img v-if="isLoaded" v-bind:src="imgSrc" v-bind:alt="imgAlt"/>
  </div>
</template>

当图片加载完成后，通过监听load和error事件来改变data()数据中的 isLoaded 的值，进而渲染对应的组件。

export default {
  data() {
    return {
      isLoaded: false,
      imgSrc: 'imageUrl',
      imgAlt: 'imageAlt'
    }
  },
  mounted() {
    const img = new Image()
    img.src = this.imgSrc

    img.onload = () => {
      this.isLoaded = true
    }

    img.onerror = () => {
      console.log('图片加载失败')
    }
  }
}

3. 示例应用

下面以两个具体示例来说明如何实现：

3.1 使用 CSS3 animation 实现 loading 组件

在项目的 static 文件夹中添加 loading 组件的动画文件，例如 animation.css 文件和 spin.js 文件。

<script src="../static/js/spin.min.js"></script>
<link rel="stylesheet" href="../static/css/animation.css">

在 loading 组件中使用引入的 spin.js 库，并使用 CSS3 animation 实现 spinning 动画效果。这里图片加载完成前会显示 spinning 动画，而图片加载完成后，才会显示真正的图片。

<template>
  <div class="image">
    <div class="loading" v-if="!isLoaded" ref="spinner"></div>
    <img v-if="isLoaded" v-bind:src="imgSrc" v-bind:alt="imgAlt"/>
  </div>
</template>

<style>
  .loading {
    margin: 10px;
    display: inline-block;
    width: 30px;
    height: 30px;
    animation: spin 1s infinite linear;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>

<script>
  import Spinner from 'spin'

  export default {
    data() {
      return {
        isLoaded: false,
        imgSrc: 'imageUrl',
        imgAlt: 'imageAlt'
      }
    },
    mounted() {
      const img = new Image()
      img.src = this.imgSrc

      const spinner = new Spinner().spin(this.$refs.spinner)

      img.onload = () => {
        spinner.stop()
        this.isLoaded = true
      }

      img.onerror = () => {
        spinner.stop()
        console.log('图片加载失败')
      }
    }
  }
</script>

3.2 使用第三方组件库实现 loading 组件

Vue 有许多第三方组件库，其中 Vue-Skeleton-Loading(https://github.com/l-lin/vue-skeleton-loading) 是一种非常流行的工具，它们都用于生成占位符。

下面就以 Vue-Skeleton-Loading 为例，来演示如何生成 loading 组件。

npm install vue-skeleton-loading --save

创建 loading 组件

<template>
  <div class="image">
    <vue-skeleton-loading :loading="!isLoaded">
      <img v-if="isLoaded" v-bind:src="imgSrc" v-bind:alt="imgAlt"/>
    </vue-skeleton-loading>
  </div>
</template>

<script>
  import VueSkeletonLoading from 'vue-skeleton-loading'

  export default {
    components: { VueSkeletonLoading },
    data() {
      return {
        isLoaded: false,
        imgSrc: 'imageUrl',
        imgAlt: 'imageAlt'
      }
    },
    mounted() {
      const img = new Image()
      img.src = this.imgSrc

      img.onload = () => {
        this.isLoaded = true
      }

      img.onerror = () => {
        console.log('图片加载失败')
      }
    }
  }
</script>

这里使用 vue-skeleton-loading 替代之前的 spinning 动画来实现 loading 组件。

以上就是“vue实现图片加载完成前的loading组件方法”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue实现图片加载完成前的loading组件方法 - Python技术站