感覺現在許多應用和網站都開始用 骨架屏 了，於是趕緊瞭解一下！ 骨架屏實現的方式 目前我瞭解到的骨架屏實現方式，可以歸納為兩種： 1. 組件級別手動調用 2. 通過webpack自動註入到首頁 組件手動調用 這種方法比較簡單通用，適用各種mvvm框架。 具體的實現方式還可以細分： 1. 用UI調好的 ...
感覺現在許多應用和網站都開始用骨架屏了，於是趕緊瞭解一下！
骨架屏實現的方式
目前我瞭解到的骨架屏實現方式，可以歸納為兩種：
- 組件級別手動調用
- 通過webpack自動註入到首頁
組件手動調用
這種方法比較簡單通用，適用各種mvvm框架。
具體的實現方式還可以細分：
- 用UI調好的圖片，簡單快捷，缺點是不好修改
- 直接寫各種組件，用組件的方法調用，缺點是：嗯，還得多寫一些代碼
優缺點
優點：骨架屏隱藏的時機方便控制；支持組件間的調用。
缺點：要手寫大量代碼(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下比較好的使用方案，能用但不保證優雅
