预加载 Skeleton Screen — 骨架屏

桃扇骨 2022-05-29 04:56 226阅读 0赞

用户体验一直是前端开发需要考虑的重要部分，在数据请求时常见到锁屏的loading动画，而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代，以优化用户体验。

![1302312-20180122214942397-1354925107.png][]

## Skeleton Screen ##

Skeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页。

## 请求处理 ##

无论是PC端还是移动端，只要有数据请求都会出现一定的延迟时间，之前对于这段等待时间的处理也是各不相同。同步请求中页面会卡住，直到请求完成，用户期间无法进行任何操作，有一种死机的感觉，体验较差。异步请求中大多数会以锁屏的loading动画过渡等待时间，于是，也就出现了制作不同loaidng状态的炫技。

![1302312-20180122214949084-1363050610.png][]

## Skeleton Screen优势 ##

锁屏loading在一定程度限制了用户的操作，所以为了进一步提升用户体验，Skeleton Screen被越来越多的公司产品采用，如：Facebook、简书、知乎、掘金等，在动态、文章加载时预先渲染出结构布局，数据加载完成后再填充数据显示，这样的好处在于不干扰用户操作，使用户对于加载的内容有一个大致的预期，特别是弱网络环境下极大的优化了用户体验。

## Skeleton Screen实现 ##

主要步骤：   
1、创建与显示内容相似的html结构   
2、在需要显示内容的元素上增加背景色

### 第一种 ###

简单堆砌出元素结构

![1302312-20180122215000662-432900787.png][]

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>
     
      
       1
       2
       3
       4
       5
       6
       7

css

### 第二种 ###

背景动画，html结构相同，修改部分css样式

![1302312-20180122215028522-1120021489.gif][]

.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; }
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17

### 第三种 ###

元素结构长度变化   
![1302312-20180122215039990-2098165675.gif][]

.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); }
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
       42
       43

## 总结 ##

前端优化仿佛是一种无止境的探索，尤其是现在产品对于用户体验的重视，任何一点体验的改善与提升都会增加用户的友好度，最终使产品留下一个好印象。

https://vv-ui.github.io/VV-UI/\#/skeleton

[1302312-20180122214942397-1354925107.png]: /images/20220529/510e32ae444645a8873d8a9d4a989281.png
[1302312-20180122214949084-1363050610.png]: /images/20220529/eb9c6046db0246458ad71a9a9e3373da.png
[1302312-20180122215000662-432900787.png]: /images/20220529/a90b5e0662604064a3215e0b9937004e.png
[1302312-20180122215028522-1120021489.gif]: /images/20220529/ac1f15fb0cfb4c5fbcf3fa174c3000cb.png
[1302312-20180122215039990-2098165675.gif]: /images/20220529/0f54f1534bc044368cfccd47ca6646d0.png