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