随着 PWA 技术的发展，越来越多的网站开始采用 PWA 技术来提升用户体验。而骨架屏效果是 PWA 中常用的一种优化手段，可以让用户在等待页面加载时看到页面的基本结构，提升用户体验。本文将介绍 PWA 中如何实现骨架屏效果。
什么是骨架屏效果
骨架屏效果是指在页面加载过程中，先展示页面的基本结构，而不是等待页面完全加载后再展示内容。通常情况下，骨架屏效果会展示页面的主要布局和部分占位符，让用户在等待页面加载时能够看到页面的基本结构。
骨架屏效果的优点
骨架屏效果的优点主要有以下几点：
- 提升用户体验：让用户在等待页面加载时能够看到页面的基本结构，提升用户体验；
- 减少白屏时间：骨架屏效果可以让页面在加载过程中展示基本结构，减少白屏时间；
- 降低页面加载时间：骨架屏效果可以让页面在加载过程中展示基本结构，减少页面加载时间。
如何实现骨架屏效果
实现骨架屏效果的方法有很多种，下面将介绍两种常用的方法。
纯 CSS 实现骨架屏效果
纯 CSS 实现骨架屏效果是最简单的方法之一，它通过使用 CSS 的伪元素来实现。具体实现方法如下：
-- -------------------- ---- -------
--------- -
--------- ---------
--------- -------
----------------- --------
-
----------------- -
-------- ---
--------- ---------
---- --
----- -------
------ ------
------- -----
----------------- --------
---------- ---------------- ---- ----------- ---------
-
---------- ---------------- -
-- -
---------- ------------------
-
---- -
---------- -----------------
-
-上面的代码中，我们给骨架屏容器 .skeleton 设置了一个灰色背景色，并使用伪元素 ::before 来实现骨架屏效果。::before 元素的宽度设置为 200px，高度设置为 100%，并设置了一个灰色背景色。同时，我们还给 ::before 元素添加了一个动画 skeleton-loading，让它在 1.5 秒内从左到右滑动，实现骨架屏效果。
使用 JavaScript 实现骨架屏效果
使用 JavaScript 实现骨架屏效果的方法相对来说比较麻烦，但是它可以实现更复杂的骨架屏效果。具体实现方法如下：
-- -------------------- ---- -------
---- --------------------
--------
-------- ---------------- -
----- -------- - ------------------------------
-----------------------------------
--- ---- - - -- - - -- ---- -
----- --- - ------------------------------
----------------------------------
--- ---- - - -- - - -- ---- -
----- ---- - ------------------------------
------------------------------------
----------------------
-
--------------------------
-
------ ---------
-
----- -------- - -----------------
----------------------------------------------------------
---------上面的代码中，我们使用 JavaScript 动态创建了骨架屏容器和骨架屏元素。首先，我们创建了一个名为 skeleton 的容器，并添加了一个名为 skeleton-row 的子元素。然后，我们循环添加了 5 行 4 列的骨架屏元素，每个元素使用 skeleton-cell 类名来标识。最后，我们将骨架屏容器添加到页面中。
总结
骨架屏效果是 PWA 中常用的一种优化手段，可以让用户在等待页面加载时看到页面的基本结构，提升用户体验。本文介绍了两种实现骨架屏效果的方法，包括纯 CSS 实现和使用 JavaScript 实现。您可以根据自己的需求选择合适的方法来实现骨架屏效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663f9d47d3423812e4dcfe8c