How to display the loading progress of images through Vue?

How to display the loading progress of images through Vue?

In web development, image loading is a very common operation. When a large number of images need to be loaded into a web page, a problem is often encountered: users cannot accurately know the progress of image loading, especially when the network speed is slow, which will cause trouble to users. Therefore, in order to improve the user experience, we can use Vue to display the loading progress of images.

In Vue, we can use the onload and onerror events of the <img alt="How to display the loading progress of images through Vue?" > tag to determine the loading status of the image. When the image is loaded successfully, the onload event is triggered; when the image fails to be loaded, the onerror event is triggered. Using these two events, we can calculate the progress of image loading and display the progress to the user.

First, let us create a Vue component named ImageProgress. In the component, we can define a calculated attribute progress to calculate the loading progress of the image and display the progress to the user. At the same time, you can also define a loadCount attribute to record the number of loaded images.

<template>
  <div>
    <img
      v-for="(src, index) in imageSources"
      :src="src"
      @load="onLoad(index)"
      @error="onError(index)"
      style="display: none;"
    />
    <div v-if="total !== 0">
      图片加载进度：{{ (loadCount / total * 100).toFixed(2) }}%
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSources: [
        // 图片地址列表
        // 可以根据需要添加和修改图片地址
      ],
      total: 0, // 总图片数量
      loadCount: 0, // 已加载的图片数量
    };
  },
  computed: {
    progress() {
      if (this.total === 0) {
        return 0;
      }
      return this.loadCount / this.total * 100;
    },
  },
  methods: {
    onLoad(index) {
      this.loadCount++;
      if (this.loadCount === this.total) {
        console.log('所有图片加载完成');
      }
    },
    onError(index) {
      console.error(`第${index + 1}张图片加载失败`);
    },
  },
  mounted() {
    this.total = this.imageSources.length;
  },
};
</script>

In the above code, we define an imageSources array, which contains a list of image addresses that we need to load. The total attribute records the total number of pictures, and the loadCount attribute records the number of loaded pictures.

In the template, we use the v-for directive to traverse the imageSources array and add onload and onerror to each image element Event listener and set the picture to hidden state. When the onload event is triggered, call the onLoad method to update the number of loaded images; when the onerror event is triggered, call the onErrorMethod to display images that failed to load.

Finally, we use the computed attributeprogress in the template to calculate the progress of image loading and display the progress to the user.

When using the ImageProgress component, you only need to introduce it in the parent component and add the image address to be loaded to the imageSources array, as shown below:

<template>
  <div>
    <ImageProgress></ImageProgress>
    <!-- 添加需要加载的图片地址 -->
    <!-- <ImageProgress :imageSources="imageSources"></ImageProgress> -->
  </div>
</template>

<script>
import ImageProgress from './ImageProgress.vue'; // 引入ImageProgress组件

export default {
  components: {
    ImageProgress,
  },
  data() {
    return {
      // 图片地址列表
      imageSources: [
        '图片地址1',
        '图片地址2',
        '图片地址3',
        // ...
      ],
    };
  },
};
</script>

The above is how to use Vue to display the image loading progress. In this way, users can clearly see the progress of image loading, which improves user experience. At the same time, this method can also be applied to other resources that need to be loaded, such as audio, video, etc. Hope this article is helpful to you!

The above is the detailed content of How to display the loading progress of images through Vue?. For more information, please follow other related articles on the PHP Chinese website!