感覺現在許多應用和網站都開始用骨架屏了，於是趕緊了解一下！

骨架屏實現的方式

目前我瞭解到的骨架屏實現方式，可以歸納為兩種：

1. 元件級別手動呼叫
2. 通過webpack自動注入到首頁

元件手動呼叫

這種方法比較簡單通用，適用各種mvvm框架。
具體的實現方式還可以細分：

1. 用UI調好的圖片，簡單快捷，缺點是不好修改
2. 直接寫各種元件，用元件的方法呼叫，缺點是：嗯，還得多寫一些程式碼

優缺點

優點：骨架屏隱藏的時機方便控制；支援元件間的呼叫。
缺點：要手寫大量程式碼(UI圖的除外)，不夠自動化，太low；同時沒有解決網速慢時的白屏問題

webpack自動注入

這種方法不怎麼通用，因為要熟悉webpack才能自己造輪子，由於本人現在還不怎麼熟悉webpack，就不說出來誤導別人了。
不過也有一些第三方的webpack外掛，以vue為例，目前我只用過：vue-skeleton-webpack-plugin, page-skeleton-webpack-plugin.
我推薦使用page-skeleton-webpack-plugin，因為它是自動生成骨架屏檔案的，根本不需要手寫樣式！

優缺點

優點：自動化，容易修改，高大上；能夠很好減少白屏時間，因為它在打包的時候，就自動把骨架屏的css樣式注入到head裡面了，能夠更快的載入顯示，然後等其他的js和css檔案載入完成後就自動替換。
缺點：由於是自動替換內容的，所以不好控制隱藏的時機，可能出現的問題就是骨架屏隱藏了，如果頁面內容是通過ajax請求的話，還是會有白屏時間；不支援元件內的呼叫。

好了，說了那麼多，下次我會結合這兩種方式，給出一個在vue下比較好的使用方案，能用但不保證優雅