骨架屏實現幾種方式（已實操~心累）

總覽

	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
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。