Make skeleton screen

1. Basic understanding

　　The realization principle of the skeleton screen is very simple, that is, the data is gradually loaded through the placeholder wireframe elements.

　　The skeleton screen is combined with the lazy loading function. Before the page is loaded, the basic structure of the page is presented first.

2. Implementation method:

　　1. Add a skeleton div behind the page element and hide this div when the page is loaded

　　2. Embed the skeleton div in the page element structure first, and replace this div when the page is loaded

　　3. The skeleton style is realized through the pseudo-element, and the skeleton and the page are dynamically switched through the operation style.

<!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>

　　　　advantage:

　　　　　　　Simple, no engineering, no skeleton dom generated by puppeteer, and no secondary development and maintenance

　　　　　　　High degree of customization, whatever you want

　　　　　　　Not bloated, just give you what you want

　　　　Disadvantages:

　　　　　　　Low degree of automation, you need to manually add classes on the skeleton dom

　　　　　　　High collaboration requirements, unlike engineering that can be constrained by engineering

3. Advantages and disadvantages:

　　　　advantage:

　　　　　　Make the app feel more expressive and attract more attention.

　　　　　　The content is still loading, and the user can also scroll freely and interact with the application.

　　　　Disadvantages:

　　　　　　Increasing the program running burden cannot solve the problem of page loading performance at all.

　　　　　　The development workload is large, and additional animation effects are drawn on specific page data.

Make skeleton screen

Guess you like