如何實現優美的骨架屏
對於前端來說，最重要的莫過於使用者體驗了，這次我們聊一聊骨架屏 - Skeleton Screen
我們平常對於需要請求載入的內容，可能用的比較多的是loading動畫，比如在內容區域放一個菊花圖，當請求結束，並且render tree構造完成後，將菊花圖移除，展示使用者想看的內容。雖然這種方式沒啥缺點，但是現在更多的網站開始使用骨架屏代替，因為它能帶過來更好的使用者體驗。 我們看幾個例子：
jira
slack
上圖展示中，我們可以看到每個site從骨架圖到真實內容的一個變化。如果你細心一點你會發現，不同site對於骨架圖的block位置是不一致的：
facebook將使用者固定的頭像，author，日期和一小部分文字作為骨架主體
jira則是標題和logo對應的很整齊
linkedin可以說完全沒有對齊，而是使用一種更加的展示骨架佈局
slack則是使用混合的loading方式，有骨架圖也有旋轉圓，不僅如此，slack並沒有全部使用同一種灰色值，不同的block的顏色代表的該區域的字型顏色，這又是一種切換順滑度的提升。
不過他們都有一個共同點，就是採用簡約的方式佈局，我們可以以此為例，創造出獨一無二的風格，來提高使用者體驗和加強品牌的風格，我想這會比一個loading logo帶來更好的效果。
上面簡單的介紹了一下骨架圖，接下來我們來說一下具體實現吧。
優先我們實現一個簡單的帶有loading效果的骨架結構：
<！DOCTYPE html>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
>
<
meta
name
=
“viewport”
content
=
“width=device-width， initial-scale=1。0”
>
<
meta
http-equiv
=
“X-UA-Compatible”
content
=
“ie=edge”
>
<
title
>
Document
title
>
<
style
>
*
{
margin
：
0
；
padding
：
0
；
}
@
keyframes
loading
{
0
%
{
background-position
：
-400
px
0
}
100
%
{
background-position
：
400
px
0
}
}
。
box1
{
position
：
absolute
；
margin
：
0
auto
；
left
：
50
%
；
margin-left
：
-400
px
；
top
：
0
；
width
：
800
px
；
height
：
60
px
；
background-color
：
blue
；
background-image
：
linear-gradient
（
to
right
，
#eeeeee
8
%
，
#dddddd
18
%
，
#eeeeee
33
%
）；
animation-duration
：
1
s
；
animation-iteration-count
：
infinite
；
animation-name
：
loading
；
animation-timing-function
：
linear
；
transition
：
0。3
s
；
}
。
bgMasker
{
background-color
：
#fff
；
}
。
line1
{
background-color
：
#fff
；
height
：
20
px
；
position
：
absolute
；
right
：
0
；
top
：
0
；
left
：
60
px
；
}
。
line2
{
background-color
：
#fff
；
height
：
20
px
；
position
：
absolute
；
right
：
700
px
；
top
：
20
px
；
left
：
60
px
；
}
。
line3
{
background-color
：
#fff
；
height
：
20
px
；
position
：
absolute
；
left
：
400
px
；
right
：
0
；
top
：
20
px
；
}
。
line4
{
background-color
：
#fff
；
height
：
20
px
；
top
：
40
px
；
position
：
absolute
；
left
：
60
px
；
right
：
500
px
；
}
。
line5
{
background-color
：
#fff
；
height
：
20
px
；
position
：
absolute
；
left
：
600
px
；
right
：
0
；
top
：
40
px
；
}
style
>
head
>
<
body
>
<！—— 骨架 ——>
<
div
class
=
“box1”
>
<
div
class
=
“bgMasker line1”
>
div
>
<
div
class
=
“bgMasker line2”
>
div
>
<
div
class
=
“bgMasker line3”
>
div
>
<
div
class
=
“bgMasker line4”
>
div
>
<
div
class
=
“bgMasker line5”
>
div
>
div
>
body
>
html
>
有一點需要說一下，由於我們使用的是漸變色的動畫效果，所以我們的佈局有一點的變化，我們採用的是整體加上背景色，然後內容使用定位和left，right來構成block的方式，具體內容請參考上面的程式碼
效果如下：
然後我們做一下簡單的骨架圖和內容的切換，這裡就不貼程式碼了，切換有很多種實現方式，不固定思維。我這邊做了兩種，一種是直接切換，一種是淡入的切換，可以簡單參考一下：
ssr，請求後用puppeteer插入script生成當前頁的骨架圖，或者build的時候直接生成（個人覺得應該是這種），然後插入到根元素內，然後資料載入後直接隱藏並展示真實資料
分塊，對於圖片，將採用最小大小尺寸 1 * 1的純色gif圖，然後進行拉伸
資料請求後對骨架進行隱藏等操作
