Vue 中实现图片加载状态检测与骨架屏动态切换-js教程-PHP中文网

Vue 中实现图片加载状态检测与骨架屏动态切换

本文讲解如何在 Vue 3 组合式 API 中精准监听单张图片加载完成状态，结合响应式 ref 和 @load 事件，为每张卡片独立控制骨架屏（Skeleton）显示逻辑，避免因初始值误判导致骨架屏闪退。

本文讲解如何在 vue 3 组合式 api 中精准监听单张图片加载完成状态，结合响应式 ref 和 `@load` 事件，为每张卡片独立控制骨架屏（skeleton）显示逻辑，避免因初始值误判导致骨架屏闪退。

在 Vue 应用中，为提升用户体验，常需在异步资源（如图片）加载完成前展示骨架屏。但若处理不当——例如未正确初始化响应式状态——会导致骨架屏“一闪而过”，即刚渲染即消失，即使图片尚未加载完成。核心问题在于：ref() 无参调用返回 undefined，而 undefined === false 为 false，致使 v-if="isLoaded === false" 条件始终不成立，骨架屏无法按预期显示。

✅ 正确做法：为每个卡片独立管理加载状态

不应在父组件 ItemSwiper.vue 中使用单一 isLoaded ref 控制所有卡片，而应让每个 ItemCard 自主维护其图片加载状态。修改如下：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

1. 父组件：移除全局 isLoaded，改用插槽 + 条件渲染

<!-- ItemSwiper.vue -->
<template><swiper class="swiper" :breakpoints="swiperOptions.breakpoints" :pagination="{ clickable: true }" :loop="true" :modules="swiperOptions.modules"><!-- 数据加载中 or 某张图片未加载完成时，显示骨架屏占位 --><template v-for="recipe in storeRecipes.data" :key="recipe.id"><swiperslide class="swiper__slide"><itemcard :data="recipe"></itemcard></swiperslide></template><!-- 数据 pending 时统一显示 3 个骨架屏 --><template v-if="storeRecipes.pending"><swiperslide class="swiper__slide" v-for="item in 3" :key="`skeleton-${item}`"><itemcardskeleton></itemcardskeleton></swiperslide></template></swiper></template><script setup>
import { onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper/modules';
import { useStoreRecipes } from '@/stores/recipes/storeRecipes.js';
import ItemCard from '@/components/ItemCard.vue';
import ItemCardSkeleton from '@/components/SkeletonLoaders/ItemCardSkeleton.vue';

const storeRecipes = useStoreRecipes();

onMounted(() => {
  storeRecipes.loadRecipes();
});
</script>

2. 子组件：每个卡片独立跟踪自身图片加载状态

<!-- ItemCard.vue -->
<template><div class="card">
    <div class="card__item">
      <!-- 图片加载完成前显示骨架屏内容（可复用 ItemCardSkeleton 结构） -->
      <div v-if="!isLoaded" class="card__skeleton">
        <div class="card__image--skeleton"></div>
        <div class="card__content">
          <div class="card__title--skeleton"></div>
          <div class="card__text--skeleton"></div>
          <div class="card__link--skeleton"></div>
        </div>
      </div>
      @@##@@
      <div v-if="isLoaded" class="card__content">
        <h2 class="card__title">{{ data.title }}</h2>
        <p class="card__text">{{ data.text }}</p>
        <router-link class="card__link" :to="{ name: 'Home' }">View more</router-link>
</div>
    </div>
  </div>
</template><script setup>
import { ref } from 'vue';

const props = defineProps(['data']);
const isLoaded = ref(false); // ✅ 关键：初始化为 false，而非 undefined

const getSrc = (ext) => {
  return new URL(
    `../assets/images/recipe/${props.data.image}${ext}`,
    import.meta.url
  ).href;
};

const handleImageError = () => {
  console.warn(`Failed to load image for recipe ${props.data.id}`);
  isLoaded.value = true; // 错误时也设为 true，避免无限 skeleton
};
</script><style scoped>
.card__skeleton {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.card__image--skeleton {
  width: 120px;
  height: 120px;
  background: #f0f0f0;
  border-radius: 8px;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
/* 其他 skeleton 样式... */
</style>

⚠️ 注意事项与最佳实践

勿共享 ref 实例：每个 ItemCard 必须拥有自己独立的 isLoaded = ref(false)，否则所有卡片将同步状态，失去“逐张加载、逐张显示”的效果。
处理加载失败：添加 @error 监听并设置 isLoaded = true，防止图片 404 导致骨架屏永久停留。
CSS 骨架动画建议：使用 @keyframes pulse 实现渐变灰度动画，比静态色块更符合现代 UX 规范。
性能优化：若卡片数量极大，可结合 IntersectionObserver 实现图片懒加载，进一步减少首屏压力。

通过以上重构，骨架屏将严格遵循“数据 pending → 显示全局 skeleton；单图未加载 → 显示该卡片 skeleton；单图加载完成 → 立即替换为真实内容”的行为逻辑，彻底解决闪退问题，实现流畅、可控的加载体验。