什么是骨架屏

作者: 上海老宅男 | 来源:发表于2020-09-15 15:06 被阅读0次

什么是骨架屏
骨架屏（ Skeleton Screen ）
骨架屏
SPA应用性能优化问题
iOS常用库列表
骨架屏
骨架屏
骨架屏
骨架屏
骨架屏

关于骨架屏(简介)

骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。
很多项目中都有应用:ex:饿了么h5版本,知乎,facebook等网站中都有应用。
借个图说例子：

image.png

image.png
上图展示中，我们可以看到每个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: -400px 0
            }

            100% {
                background-position: 400px 0
            }
        }

        .box1 {
            position: absolute;
            margin: 0 auto;
            left: 50%;
            margin-left: -400px;
            top: 0;
            width: 800px;
            height: 60px;
            background-color: blue;
            background-image: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-name: loading;
            animation-timing-function: linear;
            transition: 0.3s;
        }
        .bgMasker {
            background-color: #fff;
        }

        .line1 {
            background-color: #fff;
            height: 20px;
            position: absolute;
            right: 0;
            top: 0;
            left: 60px;
        }

        .line2 {
            background-color: #fff;
            height: 20px;
            position: absolute;
            right: 700px;
            top: 20px;
            left: 60px;
        }

        .line3 {
            background-color: #fff;
            height: 20px;
            position: absolute;
            left: 400px;
            right: 0;
            top: 20px;
        }

        .line4 {
            background-color: #fff;
            height: 20px;
            top: 40px;
            position: absolute;
            left: 60px;
            right: 500px;
        }

        .line5 {
            background-color: #fff;
            height: 20px;
            position: absolute;
            left: 600px;
            right: 0;
            top: 40px;
        }
    </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>