本文详解如何在 vue 中准确判断每张图片是否完成加载，并为未加载完成的卡片动态显示骨架屏，避免因初始状态误判导致骨架屏闪退问题。
本文详解如何在 vue 中准确判断每张图片是否完成加载，并为未加载完成的卡片动态显示骨架屏，避免因初始状态误判导致骨架屏闪退问题。
在 Vue 应用中实现“图片加载完成才渲染卡片，否则显示骨架屏”的需求时，核心挑战在于状态初始化与响应式更新的精确性。你当前遇到的问题——骨架屏仅在数据请求阶段短暂出现、图片加载过程中却消失——根本原因在于 isLoaded 的初始值未被正确定义。
? 问题根源：ref() 初始化不当
在 ItemSwiper.vue 中，你声明了：
const isLoaded = ref();
这会使 isLoaded.value 初始值为 undefined。而模板中判断逻辑：
<template v-if="storeRecipes.pending || isLoaded === false">
等价于 undefined === false → 结果恒为 false，导致骨架屏条件永远不满足，从而提前消失。
立即学习“前端免费学习笔记（深入）”；
✅ 正确做法是显式初始化为 false：
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]" />
<ItemCard
v-else
:data="recipe"
@update:isLoaded="(loaded) => imageLoadStatus[recipe.id] = loaded"
/>
</SwiperSlide>
</template>
<!-- 加载中占位（仅当无数据时显示） -->
<template v-if="storeRecipes.pending && !storeRecipes.data.length">
<SwiperSlide v-for="item in 3" :key="item">
<ItemCardSkeleton />
</SwiperSlide>
</template>
</Swiper>
</template>2. 子组件 ItemCard.vue 改为内部管理状态，并正确触发加载完成
<template>
<div class="card">
<div class="card__item">
<!-- 使用 v-show 或 v-if 控制图片显示时机（推荐 v-show 避免重绘） -->
<img
v-show="isLoaded"
class="card__image"
:src="getSrc('.jpg')"
:alt="data.alt"
/>
<!-- 骨架占位（仅在未加载时显示） -->
<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 映射状态，即可实现流畅、可靠的渐进式渲染体验。此举不仅修复了闪退问题，也为后续支持懒加载、错误降级等扩展打下坚实基础。
