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

总览

	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，未发现骨架屏）。