仅 2KB 帮助你更正确地使用 SVG 骨骼屏

什么是 SVG 骨骼屏？

SVG 骨骼屏（Skeleton Screen）是一种常用于提高页面加载体验的技术，它通过在页面加载过程中展示一个类似于页面结构的占位符，让用户感觉页面正在加载，从而增强用户体验。与传统的 loading 动画不同，SVG 骨骼屏更加贴近真实的页面内容，可以大幅度提升用户对页面的期待。

为什么要使用 SVG 骨骼屏？

相比传统的 loading 动画，SVG 骨骼屏有以下优点：

更加易于理解：SVG 骨骼屏可以模拟真实的页面结构，用户可以更加直观地了解页面加载情况。
显示内容更丰富：SVG 骨骼屏可以显示图片、文字等多种内容，比传统的 loading 动画更具可操作性。
轻量级且易于实现：使用 SVG 骨骼屏可以减轻页面的加载压力，同时也可以通过简单的 HTML、CSS 和 JavaScript 实现。

如何使用 SVG 骨骼屏？

1. 定义 SVG 骨骼屏

首先，我们需要定义一个 SVG 的占位符。以下是一个示例代码：

---- ------------ --------------
  ----- ----- ----- ------------ ------------- -------------
  ---- ---- ---
  ----- ------ ------ ------ ------ ----------- -------------
  ----- ------ ------ ------ ------ ----------- -------------
  ----- ------ ------ ------ ------ ----------- -------------
------

在这个示例中，我们定义了三个矩形来模拟页面的主要内容区域。

2. 自定义 CSS 样式

接下来，我们需要为 SVG 骨骼屏添加一些样式。以下是一个示例代码：

---- -
  ---------- ---------------- -- ----------- ---------
-

---------- ---------------- -
  -- -
    ----------------- -----
  -
  --- -
    ----------------- -----
  -
  ---- -
    ----------------- -----
  -
-

在这个示例中，我们使用 CSS 的动画属性（animation）为矩形元素添加了一个脉动的动画效果，并通过 keyframes 定义了颜色变化过程。

3. 添加 JavaScript 交互

最后，我们可以添加一些简单的 JavaScript 交互来完善 SVG 骨骼屏的体验。例如，在页面加载完成后，我们可以通过删除 SVG 元素来展示真实的页面内容。以下是一个示例代码：

------------- - ---------- -
  --- -------------- - -------------------------------------------
  ------------------------------------------------------
-

如何减小 SVG 骨骼屏的体积？

默认情况下，SVG 骨骼屏可能会有一定的体积，但我们可以通过以下方法来进一步减小体积：

使用 SVG Sprite：将多个 SVG 图片合并为一张图片，可以大幅度减小体积。
使用压缩工具：例如 svgo 可以自动化地清理、简化 SVG 文件的代码，从而减小文件体积。
手动优化 SVG 代码：手动删除不必要的元素、属性以及精简标签结构等，可以

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6534

仅 2kb 帮助你更正确地使用 SVG 骨骼屏