生成骨架屏

1. 全局安裝，npm i draw-page-structure – g

2. dps init 生成配置文件 dps.config.js

3. 修改 dps.config.js 進行相關(guān)配置

4. dps start 開始生成骨架屏

只需簡單幾步，然而并沒有繁瑣的配置：

圖片

一般來說，你需要按自己的項目情況來配置 dps.config.js ，常見的配置項有：

  • url: 待生成骨架屏的頁面地址
  • output.filepath: 生成的骨架屏節(jié)點寫入的文件
  • output.injectSelector: 骨架屏節(jié)點插入的位置，默認 #app
  • background: 骨架屏主題色
  • animation: css3 動畫屬性
  • rootNode: 真對某個模塊生成骨架屏
  • device: 設(shè)備類型，默認 mobile
  • extraHTTPHeaders: 添加請求頭
  • init: 開始生成之前的操作
  • includeElement(node, draw): 定制某個節(jié)點如何生成
  • writePageStructure(html, filepath): 回調(diào)的骨架屏節(jié)點

初步實現(xiàn)的效果：

  • 京東 PLUS 會員正式中首頁：
圖片
  • 京東 PLUS 會員正式中首頁，通過該方案生成的骨架屏效果：
圖片

  • 移動端百度首頁，通過該方案生成的骨架屏效果：


    圖片

以上就是基于 DOM 的骨架屏自動生成方案，其核心是 evalDOM 函數(shù)。這個方案在很多場景下的表現(xiàn)還是令人滿意的。不過，網(wǎng)頁布局和樣式組合的可能性太多，想要在各種場景下都獲得理想的效果，還有很長的路要走，但既然已經(jīng)在路上，就勇敢的向前吧！

--引用前端工匠文章

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 原文地址：https://github.com/Jocs/jocs.github.io/issues/22 今天的...
    雷霆克呂齊閱讀 567評論 0贊 1
  • 1. 為什么要使用骨架屏 骨架屏就是在頁面數(shù)據(jù)尚未加載前，先給用戶展示出頁面的大致結(jié)構(gòu)（灰色占位圖），直到請求數(shù)據(jù)...
    半眼魚閱讀 1,008評論 0贊 1
  • 一、什么是骨架屏？ 骨架屏可以理解為是在需要等待加載內(nèi)容的位置提供一個占位圖形組合，描繪了當前頁面的大致框架的骨架...
    高陽劉閱讀 988評論 0贊 0
  • 一、簡介 1.1 骨架屏 SPA應(yīng)用，由于初始的html內(nèi)部只有一個空的div，需要等待 js、css加載編譯完成...
    Johnson杰閱讀 1,211評論 0贊 0
  • dps init生成配置文件dps.config.js修改dps.config.js進行相關(guān)配置dps start...
    pepsilf閱讀 245評論 0贊 0

友情鏈接更多精彩內(nèi)容