如何检查图像是否在 VueJS 中加载？

在VueJS中，我们有时需要检查图像是否加载完成，以保证图像展示正确或者处理图片加载失败的情况。以下是检查图像是否在VueJS中加载的几种方式。

1. 在模板中使用 onload 事件

我们可以使用 <img> 标签的 onload 事件，当图片加载成功时会触发该事件。在 onload 事件处理程序中，我们可以设置图片的状态为 "已加载"。

<template>
  <img :src="imageSrc" @load="onImageLoad">
</template>

<script>
export default {
  data() {
    return {
      isImageLoaded: false,
      imageSrc: 'path/to/image.jpg'
    }
  },
  methods: {
    onImageLoad() {
      this.isImageLoaded = true;
    }
  }
}
</script>

以上代码中，当图片加载成功时，onImageLoad 方法会被触发，将 isImageLoaded 设置为 true。

2. 使用 Image 对象

在VueJS中，我们可以使用Image对象来加载图片，并在图片加载成功后触发回调函数。在回调函数中，我们可以设置图片状态为“已加载”。

<template>
  <div>
    <img ref="image" :src="imageSrc">
  </div>
</template>

<script>
export default {
  data() {
    return {
      isImageLoaded: false,
      imageSrc: 'path/to/image.jpg'
    }
  },
  mounted() {
    const image = new Image();
    image.onload = () => {
      this.isImageLoaded = true;
    };
    image.src = this.imageSrc;
  }
}
</script>

以上代码中，mounted 钩子函数会在组件挂载后立即执行，使用 Image 对象加载图片，并在 onload 中设置 isImageLoaded 为 true。

3. 使用 Intersection Observer API

Intersection Observer 是一个浏览器 API，可以观察目标元素在视口中与其祖先元素或顶级文档视口的交叉状态。我们可以使用 Intersection Observer 监听目标元素是否出现在视口中，从而确认图像是否已加载。

<template>
  <div ref="imageContainer">
    <img :src="imageSrc" ref="image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      isImageLoaded: false,
      imageSrc: 'path/to/image.jpg'
    }
  },
  mounted() {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.isImageLoaded = true;
          observer.disconnect();
        }
      })
    });
    observer.observe(this.$refs.imageContainer);
  }
}
</script>

以上代码中，使用 Intersection Observer 监听 imageContainer 元素是否在视口中，当出现在视口中时会触发 isImageLoaded 的 true 值，并停止观察。

以上就是在VueJS中检查图像是否加载的几种方式。通过以上方法，我们可以在图像加载成功后执行相关的操作，从而提高用户体验。