当前位置：网站首页>Project Performance Optimization Practice: solve the white screen problem of the home page, customize the loading animation to optimize the first screen effect

Project Performance Optimization Practice: solve the white screen problem of the home page, customize the loading animation to optimize the first screen effect

2022-07-19 02:23:00 【yulamz】

demand

When opening a page of the project for the first time , Because of the Internet and other reasons , It may cause the package volume to be too large .

Solution

preparation （ Use gka hold gif Turn it into svg）

Need help gka This tool . This tool is one click fast image optimization 、 Generating animation files . Just install globally , Cooperate with some commands , You can turn the picture into canvas/css/svg Animation .
First , Give Way UI hold .gif The motion picture is converted into a series of pictures , Each picture represents a single frame of this animation . And then by order gka < Folder path > -m true -t svg --minirate 0-20 -s, Merge the single frame of the animation into a sprite map , Compress according to a certain compression ratio , The last generation svg Format animation file .
Because the content of the article needs desensitization , Let's put a gka Figure in the document . The one on the left indicates loading gif All single frames of , use gka After the tool , It can be compressed into a sprite picture and matched .css file ,.html This file shows how to use this animation .

Generated files ：

A single frame → svg / canvas Dynamic effect ：
Insert picture description here

Used in projects svg Animation

First , Need to put gka Generated sprite map and css file , It's all in the middle of the project public Under the folder . This time I put sprite on public\img\loading-sprites.png,css The papers are in public\static\css\loading.css Next . Also on css The naming in the file has been optimized .

.loading-animation {
    
  width: 640px;
  height: 307px;
  background-image: url("/img/loading-sprites.png");
  background-repeat: no-repeat;
  animation-name: keyframes-loading;
  animation-duration: 2.88s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

@keyframes keyframes-loading {
    
  0% {
    
    width: 640px;
    height: 307px;
    background-image: url("/img/loading-sprites.png");
  }
  
  1.39% {
    
    background-position: -640px 0px;
  }
  
  2.78% {
    
    background-position: -1280px 0px;
  }
  
  4.17% {
    
    background-position: -1920px 0px;
  }
  
  5.56% {
    
    background-position: -2560px 0px;
  }
  
  /*  Some code is omitted here  */
  
  97.22% {
    
    background-position: -44800px 0px;
  }
  
  98.61%, 100% {
    
    background-position: -45440px 0px;
  }
}

then , On the entry page index.html Introduce the above mentioned css file .
after , Reference resources gka Generated .html file , On the page body Add below svg Elements . Let the page open , It shows that loading The effect of , Replace the original white screen . Can pass svg Labeled style attribute , Appoint width Value , change svg Size .

<!DOCTYPE html>
<html lang="zh">
  <head>
    <!--  Other code is omitted here  -->
    <link rel="stylesheet" href="/static/css/loading.css">
  </head>
  <body>
   <div id="first-loading-wrap" style="display: flex; justify-content: center; align-items: center; height:96vh; z-index: 999;">
        <svg id="first-loading-svg" viewBox="0, 0, 640, 307" style="width: 320px">
            <foreignObject id="first-loading-foreignobject" width="640" height="307">
                <div id="first-loading-content" class="loading-animation"></div>
            </foreignObject>
        </svg>
    </div>
    <div id="app">
    </div>
    <!-- built files will be auto injected -->
    </body>
  </html>

Last , On the route afterEach In the hook function , remove loading Effect related elements can .

router.afterEach(to => {
    
  //  Determine whether it is necessary to remove  loading  effect 
  document.getElementById('first-loading-wrap')?.remove()
  document.getElementById('first-loading-svg')?.remove()
  document.getElementById('first-loading-foreignobject')?.remove()
  document.getElementById('first-loading-content')?.remove()
  //  Omit other logic 
})