【神器】可视化创建骨架屏

---

title: skeleton-screen date: 2019-01-14 19:33:18 tags: javascript

背景及意义

众所周知，在互联网信息过载的时代，每个用户的注意力集中时间也越来越短，如果在web网页打开的瞬间就能吸引住用户的眼球，是每一个前端开发人员都需要仔细考虑的

我们常见的web性能优化，在于提高页面的加载速度，保证我们的页面尽快run起来，但是对于接口返回数据较慢的情况下，添加一个动态的skeleton loading可以有效的向用户传递'页面正在加载'这一有效信息，而不是让用户不知所措，失去耐心，最终选择离开

适用的场景

• 弱网环境，或后端接口业务逻辑相对复杂，需要一段时间才会返回数据
• 需要大量后端数据渲染的图文页面，最好是具有规律性的卡片或列表信息
• 提前设置好和数据正常展示时相等宽高的占位图片，也避免了页面的reflow重新布局，优化web性能

主角登场

今天我推荐的神奇就是create-content-loader，它支持react、vue主流框架，支持在线自定义骨架屏样式，使用起来十分方便

在右侧自定义好想要的样式，直接复制左侧的代码到项目工程中即可

转载于:https://juejin.im/post/5c7cc1376fb9a049c2332941