在vue js中加载组件之前渲染图像。

<template>
  <div>
    <!-- 骨架屏占位符 -->
    <div v-if="isLoading" class="skeleton-loader"></div>
    <!-- 异步加载的组件 -->
    <AsyncComponent v-else />
  </div>
</template>

<script>
import { ref, defineAsyncComponent } from 'vue';

export default {
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./path-to-your-async-component.vue')
    )
  },
  setup() {
    const isLoading = ref(true);

    // 模拟异步加载完成
    setTimeout(() => {
      isLoading.value = false;
    }, 2000); // 假设组件需要2秒加载

    return { isLoading };
  }
};
</script>

<style>
.skeleton-loader {
  /* 骨架屏样式 */
  width: 100%;
  height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>