Add a skeleton screen to vue applications -JavaScript Categories

The skeleton screen shows the general structure of the page to the user before the page data is loaded, which solves the problem that the JS page takes too long to load. At the same time, compared with loading animation, the skeleton screen has a smoother transition effect and better user experience. Skeleton screens can be written manually by developers. In this article, we use Chrome’s Node library, Puppeteer, to automatically create skeleton screens for pages.

This article is mainly divided into the following points

  • Puppeteer is introduced
  • Puppeteer USES
  • The generating principle of skeleton screen
  • How to introduce skeleton screen in VUE project
  • Mature skeleton screen components are introduced

1.puppeteer

Puppeteer is a Node library that provides a high-level API for controlling Chromium or Chrome via the DevTools protocol. Puppeteer runs in headless mode by default, but can be run in headless mode by modifying the configuration file.

Puppeteer can automatically open a browser through Node and execute code in a real browser environment, so it can be used in scenarios such as automated black box testing. This time we use puppeteer to open the specified page and manipulate the DOM to get a skeleton screen version of the actual page.

Those who want to know more about Puppeteer can visit

  • The puppeteer making
  • Puppeteer In Chinese

Puppeteer is easy to use in a project, but due to some network problems, Chromium cannot be obtained in a direct NPM installation in China.

The common solution online is to skip Chromium when puppeteer is installed, go to the Chromium website to download the latest version, and change the Chromiumd reference path when using it.

A better way is to install puppeteer via taobao mirror CNPM, which is available for personal testing and is surprisingly fast:

cnpm install -g puppeteer
Copy the code

2. The use of the puppeteer

There are many demos in the Puppeteer API documentation. Here we mainly use the Browser object and Page object of puppeteer. Browser is used to operate Browser objects, and Page is used to operate Document objects

The following is the basic syntax used by puppeteer:

var skelentonOptions = {
    url:'http://localhost:8081'.width:375.height:667
};

async function getSkeleton(option = {}){
        // Create a browser window of the specified size
        const browser = await puppeteer.launch({headless:true.defaultViewport: {width:option.width, height:option.height}});
        // Create a new TAB page
        const page = await browser.newPage();
        // Open the page to specify the path
        await page.goto(option.url,{waitUntil: 'networkidle0'});
        
        // Specific logic
        / /...

        // Take a screenshot of the home page
        await page.screenshot({
            path: 'ske.png'.type: 'png'.clip: {x:0.y:0.width:option.width,
                height:option.height
            }
        })
        
        // Close virtual Chrome
        await browser.close();
}

getSkeleton(skelentonOptions);
Copy the code

3. The generating principle of skeleton screen

My alternative idea is to find the text and image after the page loads, replace the text with a gray color and the background color, replace the image with a default image, and hide the rest of the DOM.

Here is the code to modify the DOM section:

var body = document.getElementsByTagName('body') [0],
spanList = Array.from(document.getElementsByTagName('span')),
pList = Array.from(document.getElementsByTagName('p')),
h1List = Array.from(document.getElementsByTagName('h1')),
h2List = Array.from(document.getElementsByTagName('h2')),
h3List = Array.from(document.getElementsByTagName('h3')),
h4List = Array.from(document.getElementsByTagName('h4')),
h5List = Array.from(document.getElementsByTagName('h5')),
h6List = Array.from(document.getElementsByTagName('h6')),
spanLen = spanList.length,
pLen = pList.length,
h1Len = h1List.length,
h2Len = h2List.length,
h3Len = h3List.length,
h4Len = h4List.length,
h5Len = h5List.length,
h6Len = h6List.length,
imgList = document.getElementsByTagName('img'),
imgLen = imgList.length;

// Hide other elements
body.style.visibility = 'hidden';

// Modify the font style
var textList = spanList.concat(pList, h1List, h2List, h3List, h4List, h5List, h6List),
textLen = spanLen + pLen + h1Len + h2Len + h3Len + h4Len + h5Len + h6Len;

for(let i = 0; i < textLen; i++){ textList[i].style.color ='#eee';
textList[i].style.backgroundColor = '#eee';
textList[i].style.visibility = 'visible';
}
// Modify the image style
for(let i = 0; i<imgLen; i++){ imgList[i].src ='http://image1.51tiangou.com/tgou2/img/bg-load.png';
imgList[i].style.backgroundColor = '#eee';
imgList[i].style.visibility = 'visible';
}
Copy the code

After the DOM is modified, puppeteer’s screenshot function is used to obtain a skeleton screen image of the specified size.

4. Skeleton screen was introduced in VUE project

The entry file index. HTML for the VUE project has a very simple structure


      
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>carry_cli_test</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but carry_cli_test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
    </div>
    <! -- built files will be auto injected -->
  </body>
</html>
Copy the code

When js is finished, the div#app will be completely replaced with a dom rendered by vue

So we put the skeleton screen image in div#app

So let’s see what happens

5. Use of vue-skeleton-webpack-plugin and Page-skeleton-webpack-plugin

Both are WebPack plug-ins.

The page-skeleton-webpack-plugin is developed by ele. me team. The principle is similar to that in this paper. Those interested can check out this tutorial to automate the generation of H5 skeleton pages