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

插件应用

浏览数:4,324

2018-10-30

AD:资源代下载服务
  • 该方案的大概思路图
  • 某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函数生成该页面的骨架屏节点;

参数说明

参数 说明 默认值 是否必填
url 待生成骨架屏的页面地址
output.filepath 生成的骨架屏节点写入的文件
output.injectSelector 骨架屏节点插入的位置 #app
background 骨架屏主题色 #ecf0f2
animation css3动画属性
rootNode 真对某个模块生成骨架屏 document.body
device 设备类型 mobile
extraHTTPHeaders 添加请求头
init 开始生成之前的操作
includeElement(node, draw) 定制某个节点如何生成
writePageStructure(html, filepath) 回调的骨架屏节点