該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章,在這邊整理了許多我自己使用Vue重構很多網站的經驗分享給讀者們。
我們在開發網站的時候常常會遇到說圖片或是文字還沒有透過 API 回傳回來的時候,我們的畫面的 UI 高度可能還沒有,這時候圖片跟文字載入完成後會突然的撐開 UI 的高度,整個 web 頁面會有種閃一下的狀況,會讓看的人有種不舒服的體驗感,所以在處理這種資料載入的方法,就延伸出一種叫做 Skeleton 的概念。
Skeleton 顧名思義就是骨架,我們可以看到上面範例左邊的卡片當資料載入進來的時候,先把文字給放上去,然後等瀏覽器把圖片給load完成之後,在把圖片給render出來,這時候我們的DOM因為圖片的關係,然後高度就被撐開來了,這樣子的呈現方式如果你的網站設計結構複雜,而且很吃圖片的話,其實很容易造成畫面因為DOM撐開來的閃動