Vue 图片加载状态管理：使用骨架屏实现按需渲染-js教程-PHP中文网

Vue 图片加载状态管理：使用骨架屏实现按需渲染

本文详解如何在 vue 中准确判断每张图片是否完成加载，并为未加载完成的卡片动态显示骨架屏，避免因初始状态误判导致骨架屏闪退问题。

本文详解如何在 vue 中准确判断每张图片是否完成加载，并为未加载完成的卡片动态显示骨架屏，避免因初始状态误判导致骨架屏闪退问题。

在 Vue 应用中实现“图片加载完成才渲染卡片，否则显示骨架屏”的需求时，核心挑战在于状态初始化与响应式更新的精确性。你当前遇到的问题——骨架屏仅在数据请求阶段短暂出现、图片加载过程中却消失——根本原因在于 isLoaded 的初始值未被正确定义。

? 问题根源：ref() 初始化不当

在 ItemSwiper.vue 中，你声明了：

const isLoaded = ref();

这会使 isLoaded.value 初始值为 undefined。而模板中判断逻辑：

<template v-if="storeRecipes.pending || isLoaded === false"></template>

等价于 undefined === false → 结果恒为 false，导致骨架屏条件永远不满足，从而提前消失。

✅ 正确做法是显式初始化为 false：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

const isLoaded = ref(false); // ✅ 明确初始状态：尚未加载

?️ 解决方案：为每个卡片独立管理加载状态

由于你希望每张卡片独立控制骨架屏显示（即一张图加载完就展示该卡片，其余仍保持骨架），isLoaded 不能是父组件的单个响应式变量，而应为每个 ItemCard 实例维护自己的加载状态。

✅ 推荐重构方式（推荐）

1. 父组件 ItemSwiper.vue 移除全局 isLoaded，改用数组或 Map 跟踪各卡片状态

<script setup>
import { onMounted, ref, reactive } from 'vue';
// ...其他导入

const storeRecipes = useStoreRecipes();
// 每个 recipe 对应一个加载状态：true=已加载，false=未加载，undefined=未开始（可选）
const imageLoadStatus = reactive({});

onMounted(() => {
  storeRecipes.loadRecipes();
});
</script><template><swiper class="swiper" :breakpoints="swiperOptions.breakpoints" :pagination="{ clickable: true }" :loop="true" :modules="swiperOptions.modules"><!-- 所有卡片均按需渲染骨架或内容 --><template v-for="recipe in storeRecipes.data" :key="recipe.id"><swiperslide class="swiper__slide"><!-- 使用 v-if 控制：数据 pending 或图片未加载完成时显示骨架 --><itemcardskeleton v-if="storeRecipes.pending || !imageLoadStatus[recipe.id]"></itemcardskeleton><itemcard v-else :data="recipe"> imageLoadStatus[recipe.id] = loaded" 
        />
      </itemcard></swiperslide></template><!-- 加载中占位（仅当无数据时显示） --><template v-if="storeRecipes.pending && !storeRecipes.data.length"><swiperslide v-for="item in 3" :key="item"><itemcardskeleton></itemcardskeleton></swiperslide></template></swiper></template>

2. 子组件 ItemCard.vue 改为内部管理状态，并正确触发加载完成

<template><div class="card">
    <div class="card__item">
      <!-- 使用 v-show 或 v-if 控制图片显示时机（推荐 v-show 避免重绘） -->
      @@##@@
      <!-- 骨架占位（仅在未加载时显示） -->
      <div v-show="!isLoaded" class="card__skeleton-placeholder"></div>

      <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';

const props = defineProps(['data']);
const emit = defineEmits(['update:isLoaded']);

const isLoaded = ref(false);

// 图片加载成功回调
const handleImageLoad = () => {
  isLoaded.value = true;
  emit('update:isLoaded', true);
};

// 防止缓存图片跳过 load 事件（如已缓存，手动触发）
onMounted(() => {
  const img = new Image();
  img.src = getSrc('.jpg');
  if (img.complete) {
    handleImageLoad();
  }
});

const getSrc = (ext) => {
  return new URL(`../assets/images/recipe/${props.data.image}${ext}`, import.meta.url).href;
};
</script><style scoped>
.card__skeleton-placeholder {
  width: 100%;
  height: 200px; /* 与图片高度一致 */
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}
@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>

⚠️ 注意事项

❌ 不要复用同一个 ref 控制多个卡片 —— 这会导致所有卡片同步切换状态；
✅ 使用 v-show 替代 v-if 渲染图片可避免 DOM 频繁销毁重建，提升性能；
✅ 对已缓存图片，@load 事件可能不触发，需在 onMounted 中主动检测 img.complete；
✅ 骨架屏建议使用 CSS 动画模拟加载效果，而非纯色块，体验更自然；
✅ 若图片存在加载失败风险，建议补充 @error 事件处理并提供 fallback。

✅ 总结

精准控制图片级骨架屏的关键在于：每个卡片独立维护布尔型加载状态，且初始值必须为 false。通过 ref(false) 初始化 + @load + 缓存兜底检测，再配合父组件按 ID 映射状态，即可实现流畅、可靠的渐进式渲染体验。此举不仅修复了闪退问题，也为后续支持懒加载、错误降级等扩展打下坚实基础。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！