随着移动互联网时代的到来，用户对于网页的访问速度和用户体验提出了更高的要求。在手机网络环境不佳的情况下，长时间的白屏等待往往会给用户留下消极的体验，从而降低了网站的黏性。而使用骨架屏技术可以有效地缓解这种问题，在页面展现过程中，首先用一个简单的骨架屏代替页面加载，等到页面数据加载到位后再渐进展现页面内容，从而使用户感受到更好的流畅体验。
本文将介绍一款 NPM 包 Bowley，它是一个轻量级的骨架屏库，并且具有良好的灵活性，使用 Bowley 可以为项目快速实现骨架屏功能。
Bowley 的安装
Bowley 是一个 NPM 包，因此我们需要先按照一般的 NPM 包安装方式进行安装。命令行运行以下语句：
--- ------- ------
安装完成后，Bowley 就集成到了我们的项目中，我们可以直接开始使用它。
Bowley 的基本用法
Bowley 的基本用法非常简单，只需要在页面中引入样式文件和 JavaScript 文件，然后在需要生成骨架屏的元素外部使用一个容器 div 标签，并添加 class 名称即可。
引入样式文件和 JavaScript 文件：
---- ------ --- ----- ---------------- -------------------------------------------- ---- -- ---------- -- --- ------- ---------------------------------------------------
使用容器 div 标签并添加 class：
---- ------------------------- ---- -------------------------- ---- -------------------------- ---- -------------------------- ------
其中，.bowley-container 是外部容器，.bowley-item 是表示需要生成骨架屏的元素。
最后，我们在 JavaScript 中调用 Bowley 的方法 bowley.init() 即可实现对于当前容器的骨架屏生成：
--------------
Bowley 的拓展用法
除了基本用法，Bowley 还支持更多的拓展用法，可以让我们通过一些配置项调整骨架屏的样式，从而满足项目的各种需求。
修改全局默认的样式
我们可以通过以下方式来修改全局的默认骨架屏样式，一些可调整的选项包括：颜色、宽度、高度、动画等效果等。
--------------- ------ ------- ------ ------- ------- ------- --------- ------ ---
单独修改元素的样式
对于一些需要特殊展示的元素，我们可以对其单独进行样式的调整：
---- ------------------------- ---- -------------------------- ---- ------------------- ------------- -------------- ---- -------------------------- ------
定义骨架屏的区域
在一些元素的父容器中，我们想要实现只在某一部分区域内生成骨架屏的效果，我们可以添加 class .bowley-cover，表示将该容器内的子元素设定为骨架屏区域。
---- -------------------------
---- --------------------------
---- ---------------------
---- --------------------------
---- --------------------------
---- --------------------------
------
---- --------------------------
------完成骨架屏后的后续操作
我们可以通过配置项 afterFinish 来执行骨架屏生成完成后的回调：
---------------
------------ -------- -- -
------------------- --- ------------
-
---Bowley 示例代码
在学习了 Bowley 的基本用法后，我们可以看下示例代码（HTML + CSS + JS）：
--------- -----
------
------
------------- ------------
----- ----------------
---- -- ---------- ---
----- ---------------- --------------------------------------------
-------
-- ----- --
--------------- -
------- ------
-
--------
-------
------
---- -- ---
---- -------------------------
---- -- - ---
---- --------------------------
---- -- - ---
---- ------------------ ----------------------
---- -- - ---
---- --------------------------
------
---- -- ---------- -- ---
------- ---------------------------------------------------
--------
-- --- ------
--------------
-- -------
---------------
------ -------
------------ -------- -- -
------------------- --- ------------
-
---
---------
-------
-------应用场景
骨架屏技术的应用非常广泛，例如：
- 多张图片的图库列表；
- 电商类产品列表页面；
- 瀑布流布局页面；
- 长列表类页面等。
骨架屏技术可以有效的提升用户体验，并且相对于一些复杂的前端方案，它实现的难度和成本低，可谓是前端优化领域具有很高的性价比的一种方式。
结语
本文介绍了 Bowley 包的安装、基本用法和拓展用法，以及应用场景等方面的知识。骨架屏技术是当前前端优化的一个非常实际的应用，在小型项目和中型项目中使用 Bowley 都可以提升用户体验。如果您是一位前端开发者，现在就可以尝试一下使用 Bowley 来改善您的网站性能和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ea281e8991b448dbf90