制作骨架屏

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.优缺点:

    优点:       让应用程序感觉更有表现力,吸引更多的注意力。       内容还在加载中,用户也可以*地滚动并与应用程序交互。       缺点:       增加程序运行负担,无法根本解决页面加载性能问题。       开发工作量大,对特定页面数据额外绘制动画效果。

     

 

上一篇:【ZYNQ Ultrascale+ MPSOC FPGA教程】第二章 硬件原理图介绍


下一篇:【ZYNQ Ultrascale+ MPSOC FPGA教程】第四章 PL的LED实验