【CSS】333- 使用CSS自定义属性做一个前端加载骨架

点击上方“前端自习课”关注，学习起来~

我们在打开APP或者网站的时候，经常可以看到这样的效果，在内容加载完成之前，会有一个骨架动画的出现，这种加载方式比传统的进度条方式要友好的多，但是很多朋友都不知道这种效果是如何做出来的，下面我们一步步的来看看吧。

设计Web上的加载状态常常被忽略或被认为是事后考虑。性能不仅是前端开发人员的职责，构建与慢速连接一起工作的体验也是设计挑战。虽然前端开发人员需要注意一些事情，比如压缩和缓存，但是设计人员必须考虑UI处于“加载”或“离线”状态时的外观和行为。

速度幻觉

随着我们对移动体验的期望发生变化，我们对性能的理解也在变化。我们期望网络应用程序感觉像本机应用程序一样快速响应，无论其当前的网络覆盖范围如何。

感知性能是衡量用户感觉速度的尺度。这个想法是用户更有耐心，并且如果他们知道正在发生什么，并且在内容实际存在之前能够预测内容，那么他们会认为系统更快。这在很大程度上与管理期望和保持用户知情有关。

对于Web应用程序，这个概念可能包括显示文本，图像或其他内容元素的“模型” 称为骨架屏。可以在网上可以看到，Facebook，Google，Slack等公司使用：

（Facebook的骨架屏）

（Slack的骨架屏）

例子

假设你正在构建一个Web应用程序，这是一种旅行建议类型的东西，人们可以分享他们的旅行和推荐地点，所以你的主要内容可能看起来像这样：

您可以将该卡片缩小到其基本视觉形状（UI组件的骨架）

每当有人从服务器请求新内容时，您可以立即开始显示骨架，同时在后台加载数据。内容准备就绪后，只需将骨架换成实际卡即可。这可以使用普通的 JavaScript 或使用像 Vue/React 这样的库来完成。

现在我们可以使用图像来显示骨架，但这会引入额外的请求和数据开销。我们已经在这里加载了东西，所以等待另一个图像首先加载并不是一个好方式。此外，它没有响应，如果我们决定调整一些内容卡的样式，我们将不得不复制骨架图像的更改，以便它们再次匹配。

一个更好的解决方案是只用CSS创建整个东西。没有额外的请求，最小的开销，甚至没有任何额外的标记。我们可以用下面的方式来构建它，使以后更改设计变得更容易。

通过CSS绘制骨架

首先，我们需要绘制构成卡片骨架的基本形状。我们可以通过 background-image 属性添加不同的渐变来实现这一点。默认情况下，线性渐变从上到下运行，有不同的颜色停止过渡。如果我们只定义一个颜色停止，并使其余颜色保持透明，我们可以绘制形状。

请记住，在这块，多个背景图像堆叠在一起，因此顺序非常重要。最后一个渐变定义在后面，第一个位于前面。

这些形状拉伸来填充整个空间，就像常规的块级元素一样。如果我们想要改变它，我们必须为它们定义明确的尺寸。background-size 的值来设置每个图层的宽度和高度，保持我们使用的相同顺序 background-image：

最后一步是将元素放在卡片上。这与 position:absolute 类似，表示 left 和 top 属性的值一样。例如，例如：我们可以给头像和标题 模拟24px的填充，以匹配真实内容卡的外观。

使用自定义属性将其分解

这在一个简单的例子中效果很好， 但是如果我们想要构建一些稍微复杂的东西，那么CSS会很快变得混乱并且很难阅读。如果代码交接给另外一个前端开发人员，他们就不知道所有这些神奇的数字来是从哪里来的，显然这是不易难维护的。

于是乎，这里提出用自定义CSS属性，以更加简洁，更有利于前端开发人员的方式编写骨架样式 ，甚至可以考虑不同值之间的关系：

这不仅可读性更好，而且以后更改一些值也更容易。另外，我们还可以使用一些变量(比如头像大小、卡片填充)来定义实际卡片的样式，并始终使其与骨架版本保持同步。添加一个媒体查询来调整不同断点的骨架部分现在也非常简单:

ps:浏览器对自定义属性的支持很好，但不是100％。基本上，所有现代浏览器都有支持，IE / Edge有点晚了。对于这个特定用例，使用Sass变量很容易添加回退。

添加动画

为了使这更好，我们可以为我们的骨架设置动画，并使其看起来更像是一个加载指示器。我们需要做的就是在顶层放置一个新的渐变，然后使用它来设置其位置的动画 @keyframes 以下是成品骨架卡外观的完整骨架屏-demo：

当然你可以使用 :empty 选择器和伪元素来绘制骨架，因此它只适用于空卡片元素，一旦注入了内容，框架屏幕就会自动消失。

codercao

https://juejin.im/post/5bd07157f265da0ad221cd19

▼

原创系列推荐

▼

1. JavaScript 重温系列（22篇全）

2. ECMAScript 重温系列（10篇全）

3. JavaScript设计模式 重温系列（9篇全）

4. 正则 / 框架 / 算法等 重温系列（16篇全）

5. Webpack4 入门手册（共 18 章）（上）

6. Webpack4 入门手册（共 18 章）（下）

7. 59篇原创系列汇总

点这，与大家一起分享本文吧~