總覽

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，未發現骨架屏）。