用骨架屏幹掉傳統loading和白屏
摘要：
骨架屏 Skeleton Screen Loading 也叫載入佔位圖，是近年流行的載入控制元件，通常表現形式是在介面上待載入區域填充灰色的佔位圖，與線框圖的效果非常相似。Skeleton Screen本質上是介面載入過程中的過渡效果。
知乎(列表)、豆瓣(列表/終頁) 骨架屏
...
骨架屏 Skeleton Screen Loading 也叫載入佔位圖，是近年流行的載入控制元件，通常表現形式是在介面上待載入區域填充灰色的佔位圖，與線框圖的效果非常相似。Skeleton Screen本質上是介面載入過程中的過渡效果。
知乎(列表)、豆瓣(列表/終頁) 骨架屏
| 骨架圖 | 實際頁面 |
|---|---|
|
|
|
|
|
|
基本上骨架屏和實際頁面都有差距，感覺都是隨便畫畫。。
知乎只有部分終頁用了骨架屏，簡單灰色，沒有動畫
豆瓣的列表和終頁都用了，畫的很隨意。。。但是列表頁的骨架屏有至上而下的動畫效果
場景
適用於佈局排版固定的內容區域
骨架屏所展現的是內容的大概輪廓，如果內容佈局和排版不是固定的，那麼輪廓和內容佈局的巨大差異，不僅不能給使用者順暢和期待感，反倒會造成落差。因此骨架屏適用於佈局排版固定的內容區域，例如列表、文章、個人資訊。注意：如果內容區域有空頁面的情況，也不建議使用骨架屏。
建議配合其他載入技術一起使用
使用者的網路環境是複雜的，如果載入持續時間很久，單憑骨架屏起不到流暢過渡的效果，建議配合懶載入（先文字後圖片）、逐條載入、預載入等技術，以達到更出色的體驗。
其他部門是怎麼實現的
周邊自由行的首頁
連結：ofollow,noindex">https://m.ly.com/zby/home
開發者模式將network改成slow 3G 效果比較明顯
翻了原始碼發現是用一張骨架圖片代替的loading動畫。
缺點就是如果佈局設計變了，這個骨架圖也要重新設計，很明顯這個頁面的骨架圖和頁面已經不一致了，其實不刻意去感受，體驗也不是很糟糕。
備註：圖片編譯成 base64 編碼格式可以節省網路請求，會使得骨架屏更快展現
除了用圖片替換還有什麼方式？
基本就是html結構 + css背景色來堆砌骨架，一樣也是等待的時候顯示，載入完畢移除。這種情況下大概分為三種：
- 簡單的html+css，堆砌出元素結構
- 背景loading動畫，html結構相同，修改部分css樣式參考
- 元素結構長度反覆變化（變長。。變短。。變長。。）
其實2和3也就是為了讓骨架圖更生動一些