用戶體驗一直是前端開闢須要斟酌的重要部份，在數據要求經常見到鎖屏的loading動畫，而如今越來越多的產物傾向於運用Skeleton Screen Loading(骨架屏)替換，以優化用戶體驗。

原文鏈接

Skeleton Screen
Skeleton Screen(骨架屏)就是在頁面數據還沒有加載前先給用戶展示出頁面的大抵構造，直到要求數據返回后再襯着頁面，補充進須要顯現的數據內容。常用於文章列表、動態列表頁。

要求處置懲罰

無論是PC端照樣挪動端，只需有數據要求都邑湧現肯定的延遲時間，之前關於這段等待時間的處置懲罰也是各不雷同。同步要求中頁面會卡住，直到要求完成，用戶時期沒法舉行任何操縱，有一種死機的覺得，體驗較差。異步要求中大多半會以鎖屏的loading動畫過渡等待時間，因而，也就湧現了製造差別loaidng狀況的炫技。

loading

Skeleton Screen上風

鎖屏loading在肯定水平限定了用戶的操縱，所以為了進一步提拔用戶體驗，Skeleton Screen被越來越多的公司產物採納，如：Facebook、簡書、知乎、掘金等，在動態、文章加載時預先襯着出構造規劃，數據加載完成后再添補數據顯現，如許的優點在於不滋擾用戶操縱，運用戶關於加載的內容有一個大抵的預期，特別是弱收集環境下極大的優化了用戶體驗。

Skeleton Screen完成

重要步驟：
1、建立與顯現內容類似的html構造
2、在須要顯現內容的元素上增添背景色

第一種

簡樸堆砌出元素構造

html

<div class="skeleton">
    <div class="skeleton-head"></div>
    <div class="skeleton-body">
        <div class="skeleton-title"></div>
        <div class="skeleton-content"></div>
    </div>
</div>

css

.skeleton {
    padding: 10px;
}

.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content {
    background: rgb(194, 207, 214);
}

.skeleton-head {
    width: 100px;
    height: 100px;
    float: left;
}

.skeleton-body {
    margin-left: 110px;
}

.skeleton-title {
    width: 500px;
    height: 60px;
}

.skeleton-content {
    width: 260px;
    height: 30px;
    margin-top: 10px;
}

第二種

背景動畫，html構造雷同，修正部份css款式

.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content {
    background: rgb(194, 207, 214);
    background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.15) 25%, transparent 25%);
    background-size: 20rem 20rem;
    animation: skeleton-stripes 1s linear infinite;
}

@keyframes skeleton-stripes {
    from {
        background-position: 0 0 ;
    }
    to {
        background-position: 20rem 0;
    }
}

第三種

元素構造長度變化

.skeleton {
  padding: 10px;
}

.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content {
  background: rgb(194, 207, 214);
}

.skeleton-head {
  width: 100px;
  height: 100px;
  float: left;
}

.skeleton-body {
  margin-left: 110px;
}

.skeleton-title {
  width: 500px;
  height: 60px;
  transform-origin: left;
  animation: skeleton-stretch .5s linear infinite alternate;
}

.skeleton-content {
  width: 260px;
  height: 30px;
  margin-top: 10px;
  transform-origin: left;
  animation: skeleton-stretch .5s -.3s linear infinite alternate;
}

@keyframes skeleton-stretch {
  from {
    transform: scalex(1);
  }
  to {
    transform: scalex(.3);
  }
}

總結

前端優化似乎是一種無止境的探究，尤其是如今產物關於用戶體驗的注重，任何一點體驗的改良與提拔都邑增添用戶的友好度，最終使產物留下一個好印象。