[重構倒數第24天] — You should use Skeleton

該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章，在這邊整理了許多我自己使用Vue重構很多網站的經驗分享給讀者們。

我們在開發網站的時候常常會遇到說圖片或是文字還沒有透過 API 回傳回來的時候，我們的畫面的 UI 高度可能還沒有，這時候圖片跟文字載入完成後會突然的撐開 UI 的高度，整個 web 頁面會有種閃一下的狀況，會讓看的人有種不舒服的體驗感，所以在處理這種資料載入的方法，就延伸出一種叫做 Skeleton 的概念。

Skeleton 顧名思義就是骨架，我們可以看到上面範例左邊的卡片當資料載入進來的時候，先把文字給放上去，然後等瀏覽器把圖片給load完成之後，在把圖片給render出來，這時候我們的DOM因為圖片的關係，然後高度就被撐開來了，這樣子的呈現方式如果你的網站設計結構複雜，而且很吃圖片的話，其實很容易造成畫面因為DOM撐開來的閃動