一种自动生成网页骨架屏的方式

• 该方案的大概思路图
  
• 某APP首页效果图
  

Install

npm i @nutui/draw-page-structure -g

Usage

1. dps init生成配置文件dps.config.js
2. 修改dps.config.js进行相关配置
3. dps start开始生成骨架屏

Examples

• basic

  // dps.config.js
  {
    url: 'https://baidu.com',
    output: {
      filepath: '/Users/famanoder/DrawPageStructure/example/index.html',
      injectSelector: '#app'
    },
    background: '#eee',
    animation: 'opacity 1s linear infinite;',
    // ...
  }
  

• 根据节点自定义生成

  // dps.config.js
  ...
  includeElement: function(node, draw) {
    // 定制某个节点画出来的样子，带上return false
    if(node.id == 'ui-alert') {
      // 跳过该节点及其子节点
      return false;
    }
    if(node.tagName.toLowerCase() === 'img') {
      // 对该图片生成宽100%，高8%，颜色为红色的色块
      draw({
        width: 100,
        height: 8,
        left: 0,
        top: 0,
        zIndex: 99999999,
        background: 'red'
      });
      return false;
    } 
  }
  ...
  

• 开始生成前的初始化操作

  // dps.config.js
  init: function() {
    // 生成骨架屏之前的操作
    
    // 比如删除干扰节点
    let toTop = document.querySelector('#to-top');
    if(toTop) {
      toTop.parentNode.removeChild(toTop);
    }
    // 比如适当的调整某个节点的样式
    let specil = document.querySelector('.specil');
    specil.style.visibility = 'hidden';
  }
  

  对于DOM结构比较复杂和图片比较多且分布密集的情况生成的骨架屏效果可能不尽如人意，这时候可以使用includeElement定制某个节点生成生成什么样子，或者使用init在生成骨架屏之前对DOM节点进行调整，这两个函数在面对相对复杂的DOM结构时会比较有用；

• 在浏览器中运行

  const createSkeletonHTML = require('@nutui/draw-page-structure/evalDOM')
  
  createSkeletonHTML({
    // ...
    background: 'red',
    animation: 'opacity 1s linear infinite;'
  }).then(skeletonHTML => {
    console.log(skeletonHTML)
  }).catch(e => {
    console.error(e)
  })
  

  可在控制台输出当前页面骨架屏节点，复制添加到应用页面；该做法目前来说最大的作用在于应对需要登录的页面，可在相应页面直接调用evalDOM函数生成该页面的骨架屏节点；

参数说明

收藏

喜欢 0