本文介绍一种基于 css 动画延迟显示的方案，避免骨架屏在数据快速加载时“闪现”，确保仅在真正需要时才呈现，兼顾用户体验与性能。
本文介绍一种基于 css 动画延迟显示的方案，避免骨架屏在数据快速加载时“闪现”，确保仅在真正需要时才呈现，兼顾用户体验与性能。
在 Vue 3 应用中实现骨架屏（Skeleton Loader）时，一个常见却容易被忽视的问题是：当接口或资源（如图片）响应极快（例如本地缓存、CDN 命中），骨架屏会瞬间出现又立即消失，造成视觉“闪烁”。这并非逻辑错误，而是 UI 状态切换缺乏最小展示时长约束所致。
核心思路不是“等待数据”，而是 “延迟展示骨架屏” —— 即：骨架屏默认不显示；仅当真实内容未在预设阈值（如 300ms）内就绪时，才淡入呈现。这样既避免了快加载下的闪烁，又保留了慢加载时的友好占位体验。
✅ 推荐实现方案（纯 CSS + Vue 响应式）
无需修改 onMounted 中的图片加载逻辑，也不依赖 setTimeout 控制 isLoaded，而是将“是否显示骨架屏”的决策交给样式层：
<template><!-- 骨架屏始终渲染，但通过 CSS 控制其可见性 --><itemcardskeleton class="skeleton-content" v-if="!isLoaded"></itemcardskeleton><template v-else>
@@##@@
<div class="card__content">
<h2 class="card__title">{{ recipe.title }}</h2>
</div>
</template></template>
<style scoped>
@keyframes skeletonFadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.skeleton-content {
opacity: 0;
/* 关键：延迟 300ms 后开始动画，若内容在此之前已加载完成，该元素仍处于 opacity:0 状态且不会被用户察觉 */
animation: skeletonFadeIn 0.3s ease-out 0.3s forwards;
}
</style>
? 原理说明：
animation-delay: 0.3s表示动画在元素挂载后等待 300ms 才启动；animation-fill-mode: forwards确保动画结束后保持opacity: 1；而一旦v-else分支生效（即isLoaded === true），<itemcardskeleton></itemcardskeleton>被卸载，CSS 动画自然终止——用户完全感知不到“未触发的骨架屏”。
⚠️ 注意事项与优化建议
-
避免滥用
v-if切换骨架屏：原代码中v-if="pending === false || !isLoaded"可能导致 DOM 频繁销毁重建，推荐统一用v-if="!isLoaded"控制骨架屏，并由isLoaded单一状态驱动。 -
图片加载优化补充：可结合
img.onload+isLoaded.value = true，但无需加setTimeout延迟赋值——延迟应由 CSS 承担，JS 层只需真实反映加载完成状态。 -
可扩展性设计：若需全局控制最小骨架显示时间，可封装为
<suspense></suspense>+ 自定义指令，或使用useTimeoutFn（VueUse）配合v-show实现更精细的过渡逻辑。 -
无障碍考量：对屏幕阅读器用户，建议为骨架容器添加
aria-busy="true"和aria-live="polite"，并在内容加载完成后移除。
✅ 总结
骨架屏闪烁的本质是“状态切换过快”。最佳解法不是让数据变慢，而是让 UI 展示更聪明：用 CSS animation-delay 设置最小曝光窗口，让骨架屏只在真正必要时才浮现。该方案零 JS 业务侵入、无竞态风险、兼容 SSR，是 Vue 3 骨架加载体验的轻量级最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
