骨架屏是用灰色块模拟真实内容布局的占位方案，而非动效加载图标；它通过伪元素渐变背景、结构一致的DOM和display:none切换实现平滑渲染，避免布局跳变，提升用户对内容位置与结构的预期。
什么是骨架屏，为什么不用 loading 图标
骨架屏不是动效图标，而是用灰色块模拟真实内容的布局结构，在数据加载完成前先渲染出“形似”的占位容器。它比 loading 图标更符合用户预期——能明确感知到内容即将出现在哪、有多大、有几行，减少白屏焦虑。关键在于：它必须和最终 DOM 结构高度一致，否则加载后会触发重排或视觉跳变。
用纯 CSS 实现骨架屏的关键技巧
核心是用 ::before 或 ::after 伪元素 + background-image: linear-gradient() 模拟渐变灰阶效果，再配合 animation 让高亮条横向扫过，营造“正在加载中”的视觉暗示。
- 避免直接写死宽高，优先用
width: 100%和aspect-ratio（现代浏览器）或padding-top百分比撑开容器 - 文字行用多个
div模拟，每行高度设为1rem，margin-bottom控制行距，不要用line-height配合空格模拟多行 - 图片区域推荐用
border-radius+overflow: hidden+ 灰色背景，比加img标签更轻量且不触发资源请求 - 动画时长建议设为
1.2s，太短显得急促，太长延迟感明显；用ease-in-out比linear更自然
.skeleton-item {
background-color: #f0f0f0;
}
.skeleton-item::before {
content: '';
display: block;
background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
background-size: 200% 100%;
animation: loading 1.2s infinite;
}
@keyframes loading {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
Vue/React 中动态控制骨架屏显隐的常见错误
骨架屏不是全局开关，必须和真实组件的加载状态强绑定。最容易踩的坑是：在 data 初始化为空时就渲染骨架，但接口返回空数组或 null 后没及时切换，导致“骨架屏永远不消失”。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- Vue 中慎用
v-if="!data.length"判断，应改为v-if="loading || !data?.length"，并确保loading在请求开始时置true，响应后置false - React 中不要把骨架屏写在条件渲染外层，比如
{loading && <skeleton></skeleton>}{data && <reallist></reallist>}是安全的；但{data ? <reallist></reallist> : <skeleton></skeleton>}会导致首次 data 为undefined时误判 - 服务端渲染（SSR）场景下，骨架屏不能出现在首屏 HTML 中，否则会被搜索引擎抓取为真实内容，需用
v-show或display: none控制初始隐藏，等客户端 hydration 后再根据状态显示
如何让骨架屏适配深色模式
骨架屏颜色不是固定写死的 #f0f0f0，而要跟随系统主题变化。CSS 自定义属性 + @media (prefers-color-scheme: dark) 是最稳妥的方式。
立即学习“前端免费学习笔记（深入）”；
- 定义两套变量：
--skeleton-bg: #f0f0f0和--skeleton-bg-dark: #333，在根元素上设置，并在媒体查询中覆盖 - 渐变动画里的中间色也要同步换，比如
linear-gradient(90deg, transparent, var(--skeleton-bg), transparent) - 如果项目用了 CSS-in-JS 或 Tailwind，注意其暗色模式插件是否支持伪元素的变量注入，部分方案对
::before的var(--x)支持不完整
骨架屏真正难的不是画几个灰色块，而是让它和业务组件的生命周期、DOM 结构、主题系统严丝合缝地咬合。一个没对齐的 padding、一次忘记清除的 loading 状态、一段没随主题更新的渐变色，都会让用户瞬间出戏。
