制作骨架屏

1.基本理解

　　骨架屏实现原理很简单，就是通过占位线框元素，渐进式加载数据。

　　骨架屏是结合了懒加载功能，在页面没有加载完成之前，先呈现页面基本结构。

2.实现方法：

　　1.在页面元素后面增加一个骨架div，当页面加载完成后就隐藏这个div

　　2.在页面元素结构中先嵌入骨架div，当页面加载完成后就替换这个div

　　3.通过伪元素实现骨架样式，通过操作样式实现骨架和页面的动态切换

<!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>骨架屏示例</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>

　　　　优点：

　　　　　　　简单，不需要工程，不用puppeteer生成骨架dom，也不需要二次开发维护

　　　　　　　定制程度高，想怎么搞就怎么搞

　　　　　　　不臃肿，只给你想要的

　　　　缺点：

　　　　　　　自动化程度低，需要在骨架dom上手动添加类

　　　　　　　协同要求高，不像工程化能通过工程去约束

3.优缺点：

　　　　优点：

　　　　　　让应用程序感觉更有表现力，吸引更多的注意力。

　　　　　　内容还在加载中，用户也可以自由地滚动并与应用程序交互。

　　　　缺点：

　　　　　　增加程序运行负担，无法根本解决页面加载性能问题。

　　　　　　开发工作量大，对特定页面数据额外绘制动画效果。

猜你喜欢