在移动端页面中，快速加载是一个至关重要的需求。用户不希望等待太久才能看到页面内容。而 PWA (Progressive Web App) 则是将 web 应用无缝地集成到移动设备中的一种方式，而 Skeleton 则是一种优秀的展示加载效果的解决方案。本文将向你介绍如何在 PWA 中使用 Skeleton 来展示页面加载效果，以提高用户体验。
什么是 Skeleton?
Skeleton 是一种展示页面加载效果的方式。它是一种 UI 组件，可以在加载页面内容前，快速展示页面的大致轮廓，让用户先看到一个大致的页面结构。这样用户就不会感到页面出现了“卡顿”或“白屏”的情况，从而提高了用户体验。
为了更好地理解 Skeleton，我们可以看一个示例：
如上图所示，页面开始加载时，先显示了整体页面的大致轮廓，再一步步地填充内容，最终呈现完整的页面。Skeleton 可以根据不同的页面结构与样式进行自定义，以满足各种不同的需求。
在 PWA 中使用 Skeleton 的方法
在 PWA 中使用 Skeleton 的方法与在普通 web 应用中类似，可以按照以下步骤进行：
- 创建 HTML 结构
首先，你需要为你的页面创建一个 HTML 结构，用于展示 Skeleton。在这个结构里，你可以使用空白的文本占位符以及自定义颜色、边框样式等进行自定义，以达到更好的展示效果。
下面是一个常见的 Skeleton HTML 结构示例：
-- -------------------- ---- -------
---- ----- ---
---- ---------------------------
---- ---- ---
---- ----------------------------
---- --- ---
---- ---------------------
---- -- ---
---- --------------------------------
---- ---- ---
---- --------------------------------
---- ---- ---
---- --------------------------------
------
---- --- ---
---- -------------------------
---- ---- ---
---- ----------------------------
---- ---- ---
---- -------------------------------
---- -- ---
---- -------------------------------------
---- -- ---
---- ------------------------------------
------
------
------在这个示例中，我们创建了一个骨架屏容器，里面包含了一些常见的网页元素，比如菜单栏、列表、标题、文本等。这些元素都是用空白的文本占位符和预设的样式进行了展示。
- 使用 CSS 样式进行美化
接下来，你需要使用 CSS 样式，对上述 HTML 结构进行美化。你可以为每一个细节制定自己想要的样式，以达到更好的展示效果。
下面是一个常见的 Skeleton CSS 示例：
-- -------------------- ---- ------- ------------------- - ----------------- ----- ------- --- ----- ----- -------------- ---- ----------- - --- --- ------- -- -- ---- -------- ----- - -------------- - ------ ------ ------- ----- -------------- ----- ----------------- ----- - ------------- - -------- ----- ---------------- -------------- -------------- ----- - ------------------ - ------ ------------ - ------ ------- ----- ----------------- ----- - ----------------- - -------- ----- -------------- ----- - -------------- - ------ ------ ------- ------ ------------- ----- ----------------- ----- - ----------------------- - ----- -- - ----------------------- - ------- ----- -------------- ----- ----------------- ----- - ---------------------- - ------- ------ ----------------- ----- -
在这个示例中，我们针对每一个 HTML 元素进行了样式的设定与调整，以达到更好的展示效果。你可以根据自己的需求进行自定义，例如加入渐变、阴影等效果，来增加视觉层次感。
- 使用 JavaScript 控制 Skeleton 的展示
最后，你还需要使用 JavaScript 控制 Skeleton 的展示。你需要使用 JavaScript 监听页面加载事件，以在内容加载完毕后，将 Skeleton 隐藏或移除。
下面是一个常见的 Skeleton JavaScript 控制示例：
window.onload = function() {
// 隐藏 Skeleton
document.querySelector('.skeleton-container').style.display = 'none';
};在这个示例中，我们使用 window.onload 监听了页面加载事件，并在内容加载完成后，设置了 Skeleton 容器的 display 属性为 none，以将它隐藏。
总结
通过以上步骤，你可以很容易地在 PWA 中使用 Skeleton 展示页面加载效果，并提高用户体验。当然，Skeleton 只是页面优化的一种方式，你还可以使用其他技术手段来提高页面加载速度，例如使用图片懒加载、减少资源文件大小等。
最后，附上完整示例代码：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f5bb3968c7c53b0163248