介绍
skeleton-loader 是一个基于 webpack 的无依赖的 CSS 骨架屏库，可以帮助我们快速地生成骨架屏，提供更好的用户体验。在前端开发中，加载时间长、白屏时间过长是用户体验的一个重大问题，使用骨架屏技术可以在页面加载过程中解决这个问题。
安装
在项目中使用 skeleton-loader，需要先安装它。
npm install skeleton-loader --save-dev
使用
接下来，通过一个实际的案例来演示该如何使用 skeleton-loader。
创建样式文件
首先，我们需要为骨架屏创建一个样式文件。样式文件只需要包含对应页面中需要骨架屏化的元素的样式，以及样式后缀。
-- -------------------- ---- -------
----------------- -
--------- ---------
-
----------------- -
--------- ---------
---- --
------- --
----- --
------ --
----------------- --------
-------- ----
-引入样式文件
然后，我们需要在页面中引入该样式文件。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
--------------- ------ ------------
----- ---------------- ------------------- --
-------
---------- -
---------- ------
------- - -----
------------ -----
-
--------
-------
------
---- ------------------
---- -------------------------
--- ------------------------------
-- -----------------------------
-- -----------------------------
-- -----------------------------
-- -----------------------------
-- -----------------------------
------
---- ---- ---
---- ----------------
---------- -----------
-------- ----- ----- --- ----- ----------- ---------- ---------
------ -- ------- ------ ---------- -- ------ -- ------ ----- -----------
----- ---- -- ----- ------- ---- ------- ------------ ------- ------- ---- -- ------- -- -- ------- --------------
------- ---- ----- ----- -- ------------- -- --------- ----- ---- ------ ------ -- ------ ----- -------------
------------ ---- -------- --------- --- --------- ---- -- ----- --- ------- -------- ------ ---- -- --- ------------
------
------
-------
-------配置 webpack
最后，我们需要在 webpack 中配置 skeleton-loader。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- - ------- ----------------- --
-------- -------- -- -----------
--
--
--
--运行
现在我们可以运行项目看看骨架屏效果了。
npm run dev
总结
使用 skeleton-loader，我们可以很方便地生成骨架屏，提高用户体验。同时，在实际开发中，我们还需要结合其他方案来尽可能地减少白屏时间、加速页面加载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63620