骨架屏实现几种方式（已实操~心累）

总览

	css实现	awesome-skeleton	vue-skeleton-webpack-plugin	page-skeleton-webpack-plugin
优点	简单粗暴易理解实现准确灵活	工具，开发完之后生成图片即可，方便。	简单	简单，准确
缺点	较为麻烦	部分复杂网页无法实现	笨重，无法根据页面样式生成对应的骨架屏	无人维护，需修改源码
可用性	推荐	较推荐	不推荐	不推荐

css实现（简单粗暴好理解）

请求之前加 .skeleton ,有数据时候把 .skeleton 样式去掉。

css

.skeleton {
  background-image: linear-gradient(-45deg, #f5f5f5 40%, #fff 55%, #f5f5f5 63%);
  // width: 300px;
  // height: 100px;
  list-style: none;
  background-size: 400% 100%;
  background-position: 100% 50%;
  animation: skeleton-animation 2s ease infinite;
  margin-top 50px
}

@keyframes skeleton-animation {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
复制代码

util.js

export const skeleton = (data, otherClass)=> {
   return data ? ` ${otherClass}` : `skeleton ${otherClass}`
 }

复制代码

使用

<div :class="skeleton(true)"></div>
复制代码

使用 awesome-skeleton 工具

github.com/kaola-fed/a…

git clone https://github.com/kaola-fed/awesome-skeleton.git

cd awesome-skeleton 

npm i

cd demo

node index.js

自动打开网站，几秒钟会出现生成骨架屏，点击。然后会在 demo/skeleton-output 下生成骨架屏的图片和base64 文件
复制代码

vue-skeleton-webpack-plugin

vue-skeleton-webpack-plugin 样式不能根据内容生成骨架屏，是一开始写的什么就是什么，灵活度不高。

page-skeleton-webpack-plugin

不是很好用，代码不维护了， 下载之后需修改 node_module/page-skeleton-webpack-plugin/src/skeletonPlugin.js 中的文件

SkeletonPlugin.prototype.createServer 中（大概在23行）：

if (!this.server) {
    const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign
    server.listen().catch(err => server.log.warn(err))
  }
  // const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign
  // server.listen().catch(err => server.log.warn(err))

复制代码

在浏览器打开页面，输入 Ctrl|Cmd + enter 会出现 preview skeleton page 按钮 点击会出现预览骨架屏（需要等5-10秒钟），点击右上角保存按钮，会生成 shell 文件

然后 npm run build 编译项目 在nginx下启动dist目录后，访问页面查看效果。使用slow3G可以很容易地观察到效果， （我使用node服务器启动dist，未发现骨架屏）。

作者：前端coder
链接：https://juejin.cn/post/6884146151604355086
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。