什么骨架屏？怎么做的？

骨架屏（Skeleton Screen）其实就是网页在加载真实数据之前，先展示出的一个“低配版”占位图。它的核心逻辑并不复杂：用简单的灰色块模拟出最终内容的轮廓。

通常有三种主流的实现方式，我帮你梳理了一下：

---

1. 基础版：纯 CSS 实现（最常用）

这种方式最轻量。通过给空的 <div> 加上背景色和动画，模拟出“流光”效果。

<div class="skeleton-card">
  <div class="skeleton-avatar"></div>
  <div class="skeleton-info">
    <div class="skeleton-line short"></div>
    <div class="skeleton-line long"></div>
  </div>
</div>

/* 基础灰色块 */
.skeleton-avatar, .skeleton-line {
  background: #e2e2e2;
  border-radius: 4px;
}

/* 关键：流光动画 */
@keyframes loading {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

.skeleton-card {
  /* 使用渐变制作闪烁感 */
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

---

2. 进阶版：利用 UI 组件库（效率最高）

如果你在用 Vue (Element Plus) 或 React (Ant Design)，根本不需要手写 CSS，官方已经封装好了：

• Element Plus: 使用 <el-skeleton>。
• Ant Design: 使用 <Skeleton />。

代码示例 (Vue):

<template>
  <el-skeleton :loading="loading" animated>
    <template #template>
      <el-skeleton-item variant="circle" style="width: 40px; height: 40px" />
      <el-skeleton-item variant="p" style="width: 50%" />
    </template>
    <template #default>
      <div>这是我的真实数据内容</div>
    </template>
  </el-skeleton>
</template>

---

3. 自动生成版（大厂黑科技）

对于页面非常复杂的场景，手写骨架屏很痛苦。一些大厂会使用 “图片占位” 或者 “自动化工具”：

1. **饿了么的 page-skeleton-webpack-plugin**：它会运行你的页面，自动分析 DOM 结构，生成一张 SVG 图片作为骨架屏。
2. 直接切图：视觉设计师出一张灰色的占位图，Loading 时直接展示这张图。

---

总结：你应该选哪种？