Frontend Skeleton Screen

---

When do you need to use a frontend skeleton screen? It is mainly used when the homepage has not fully loaded yet. You can display a skeleton screen first to avoid a blank screen, which would otherwise create a poor user experience. So how do you implement it? You need to configure Dps.config.js as shown below.

In the configuration, the url field is the address of the page for which you want to generate the skeleton screen. You can even use a website like Baidu (https://baidu.com) for testing. The output field defines where the skeleton screen will be generated. The filepath specifies the page where the skeleton screen will be saved, usually the entry page of your project. The injectSelector specifies the DOM node where the skeleton screen will be injected.

The includeElement option allows you to customize or exclude certain nodes during rendering. You can target nodes by id, or check the tagName and define how they should be rendered. The init function runs before generating the skeleton screen and can be used to remove interfering elements.

Basic Configuration Field Description

const dpsConfig = {
  url: 'file:///Users/myname/Desktop/project/pro/scaleTips/dist/index.html#/',
  // The page URL for which the skeleton screen will be generated.
  // You can also try using https://baidu.com

  output: {
    filepath: '/Users/myname/Desktop/project/pro',
    // The file where the generated skeleton screen will be stored,
    // usually the entry page of the project

    injectSelector: '#app'
    // The DOM node where the skeleton screen will be injected
  },

  // header: {
  //   height: 40,
  //   background: '#1b9af4'
  // },

  // background: '#eee',
  // animation: 'opacity 1s linear infinite;',

  // Used to customize or exclude certain nodes during rendering
  includeElement: function(node, draw) {
    // Customize how a specific node is drawn, then return false
    if (node.id == 'ui-alert') {
      // Skip this node and its children
      return false;
    }

    if (node.tagName.toLowerCase() === 'img') {
      // Replace the image with a red block (width 100%, height 8%)
      draw({
        width: 100,
        height: 8,
        left: 0,
        top: 0,
        zIndex: 99999999,
        background: 'red'
      });
      return false;
    }
  },

  // writePageStructure: function(html) {
  //   // Customize how the skeleton screen HTML is handled
  //   // fs.writeFileSync(filepath, html);
  //   // console.log(html)
  // },

  init: function() {
    // Operations before generating the skeleton screen,
    // such as removing interfering elements
  }
};

module.exports = dpsConfig;