Vue 中实现图片加载状态检测与骨架屏按需显示的完整方案-js教程-PHP中文网

Vue 中实现图片加载状态检测与骨架屏按需显示的完整方案

本文详解如何在 Vue 3 组合式 API 中精准控制每张图片的加载状态，避免因 ref() 初始化不当导致骨架屏闪退，并实现「数据加载中显示全局骨架屏、单图未加载完成时局部保留骨架」的渐进式渲染体验。

本文详解如何在 vue 3 组合式 api 中精准控制每张图片的加载状态，避免因 `ref()` 初始化不当导致骨架屏闪退，并实现「数据加载中显示全局骨架屏、单图未加载完成时局部保留骨架」的渐进式渲染体验。

在 Vue 应用中，为提升用户体验，常采用“骨架屏（Skeleton Loader）+ 图片懒加载”策略。但若状态管理不严谨（如 ref() 未初始化），极易出现骨架屏仅在数据请求阶段短暂显示、图片实际加载过程中却直接渲染空白或占位失败的问题——这正是原代码中 const isLoaded = ref() 导致 isLoaded === false 永远为 false 的根本原因。

✅ 正确的状态初始化与响应式绑定

ref() 若不传参，默认值为 undefined，而 undefined === false 结果为 false，因此

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

// ItemSwiper.vue（父组件）
const isLoaded = ref(false); // ✅ 正确：初始为 false，骨架屏可正常触发

但注意：此处 isLoaded 是单个布尔值，无法反映多张图片各自的加载状态。原需求强调“一张图加载完就显示对应卡片，其余仍显示骨架”，因此每个 ItemCard 必须独立维护自己的 isLoaded 状态，而非由父组件统一控制。

✅ 改造方案：子组件自治 + 父组件条件渲染

1. 父组件（ItemSwiper.vue）移除全局 isLoaded，改用 v-for 遍历时为每项生成独立状态

<template><swiper ...><!-- 数据未就绪时：统一显示3个骨架屏 --><template v-if="storeRecipes.pending"><swiperslide v-for="i in 3" :key="i"><itemcardskeleton></itemcardskeleton></swiperslide></template><!-- 数据就绪后：逐个渲染卡片，每张图加载完成前显示骨架 --><template v-else><template v-for="recipe in storeRecipes.data" :key="recipe.id"><swiperslide class="swiper__slide"><!-- 关键：将 isLoaded 状态下放至 ItemCard 内部管理 --><itemcard :data="recipe"></itemcard></swiperslide></template></template></swiper></template><script setup>
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 v-if="!isLoaded"></itemcardskeleton>
      @@##@@
      <div 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, onMounted } from 'vue';
import ItemCardSkeleton from '@/components/SkeletonLoaders/ItemCardSkeleton.vue';

const props = defineProps(['data']);
const isLoaded = ref(false);
const imageSrc = ref('');

onMounted(() => {
  // 预加载图片资源，避免首次渲染时白屏
  const src = new URL(
    `../assets/images/recipe/${props.data.image}.jpg`,
    import.meta.url
  ).href;
  imageSrc.value = src;
});

const onImageLoad = () => {
  isLoaded.value = true;
};

const onImageError = () => {
  console.warn(`Failed to load image for recipe ${props.data.id}`);
  isLoaded.value = true; // 失败也视为“加载结束”，避免骨架卡死
};
</script>

⚠️ 注意事项与最佳实践

避免跨组件共享单一 ref 控制多元素状态：每个卡片应有独立 isLoaded，否则会出现“一张图加载完，所有卡片同时显示”的错误行为；
务必处理 @error 事件：网络异常或路径错误时，@load 不会触发，需主动降级；
服务端渲染（SSR）兼容性：@load 在 SSR 中不可用，若需 SSR 支持，建议结合 IntersectionObserver 或 loading="lazy" 原生属性；
性能优化：对大量卡片，可添加 v-memo 或使用虚拟滚动（如 vue-virtual-scroller）防止重复渲染。

通过以上改造，即可实现真正的“按图加载、按需展示”：数据请求阶段显示全局骨架屏；数据到达后，每张图片独立控制其骨架屏生命周期，加载完成即切换为真实内容，大幅提升首屏感知速度与用户体验一致性。