如何实现类似YouTube的页面加载动画？预加载元素方案及样式名称

你说的这种加载效果叫骨架屏（Skeleton Screen），是替代传统加载 spinner 的渐进式加载方案，核心是用占位元素模拟页面结构，在真实内容加载完成后替换，能让用户提前感知页面布局，降低等待焦虑。

一、基础实现思路 #

• 先用静态骨架占据页面位置，样式模拟真实内容的轮廓（色块、圆角等）
• 给骨架添加动态动画（比如渐变位移），模拟加载状态
• 监听内容/页面加载完成事件，切换显示真实内容、隐藏骨架

二、具体代码示例 #

1. HTML 结构 #

先定义骨架占位容器，再写默认隐藏的真实内容：

<!-- 骨架屏容器 -->
<div class="skeleton-container">
  <div class="skeleton-item skeleton-title"></div>
  <div class="skeleton-item skeleton-text"></div>
  <div class="skeleton-item skeleton-text"></div>
  <div class="skeleton-item skeleton-button"></div>
</div>

<!-- 真实内容容器 -->
<div class="real-content" style="display: none;">
  <h2>这是页面标题</h2>
  <p>这里是加载完成后的正文内容...</p>
  <p>更多详情内容会在资源加载完毕后显示</p>
  <button>点击查看</button>
</div>

2. CSS 样式 #

实现骨架视觉效果和加载动画：

/* 骨架容器基础样式 */
.skeleton-container {
  padding: 1.5rem;
}
.skeleton-item {
  background-color: #e5e7eb;
  border-radius: 4px;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
/* 模拟不同模块尺寸 */
.skeleton-title {
  height: 2rem;
  width: 50%;
}
.skeleton-text {
  height: 1rem;
  width: 100%;
}
.skeleton-button {
  height: 2.5rem;
  width: 25%;
}

/* 渐变扫过动画 */
.skeleton-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: skeleton-shine 1.6s infinite;
}
@keyframes skeleton-shine {
  to {
    left: 100%;
  }
}

3. JavaScript 控制切换 #

模拟内容加载完成后的显示逻辑（实际项目中替换为真实加载事件，比如接口请求完成、图片加载完毕）：

// 模拟2秒加载时间
setTimeout(() => {
  document.querySelector('.skeleton-container').style.display = 'none';
  document.querySelector('.real-content').style.display = 'block';
}, 2000);

// 监听页面所有资源加载完成的场景：
// window.addEventListener('load', () => {
//   document.querySelector('.skeleton-container').style.display = 'none';
//   document.querySelector('.real-content').style.display = 'block';
// });

三、进阶优化要点 #

• 骨架结构尽量贴近真实页面布局，提升用户感知一致性
• 用 CSS 变量统一管理骨架颜色、动画速度，方便全局调整
• 动态列表场景可通过循环批量生成骨架项
• 若加载超时，添加错误提示或重试按钮，避免用户无限等待

内容的提问来源于stack exchange，提问作者Eugene Domosedov