关于骨架屏的最佳实践

Question

想问一下大家在实际工作中，实际项目中，关于骨架屏的方案，使用的是什么呢？
1、图片
2、插件
3、手写静态页面

不限于以上几个，欢迎讨论。

Answer 1

最佳实践，就是手写（致敬波神）

首先我认为下面三种方式都不太合我意
1、图片
2、插件
3、手写静态页面

我的解决方案是通过 css 来实现，有个伪元素不知道你有没有使用过
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:empty

在数据回来之前我们可以将container的子元素选择不挂载，这样container的empty伪元素就起作用的

<div class="container">
    <div v-if="data"></div>
</div>

下面是实现一个骨架屏的css代码,这是一种在逻辑代码中高度解耦的最好方式，不知道你今天博学了没有

.card:empty {
  background-image: radial-gradient(circle 20px, #ccc 100%, transparent),
    linear-gradient(#ccc, #ccc),
    linear-gradient(#ccc, #ccc),
    linear-gradient(#ffffff, #ffffff);
  background-size: 48px 48px, 60px 20px, 100px 20px, 100% 100%;
  background-position: 50% 24px, 50% 100px, 50% 150px, 0 0;
  background-repeat: no-repeat;
}

具体效果见下图

Answer 2

最佳实践，就是手写。

分组件时，各自写各自的。只需要多写一个样式即可。

Answer 3

做为没有写过骨架屏的人，上来不负责的推荐一个工具：Creator of React Content Loader。
是基于 Svg 实现的。应该是属于楼主所描述方案中的“图片”。

Answer 4

推荐手写。
写页面的时候按照骨架屏小组件来布局，只写一份样式就ok。
图片不推荐，插件太复杂。