draw-page-structure生成骨架屏

已于 2022-10-28 16:19:38 修改
阅读量651 收藏 2
点赞数 1
文章标签： js html5
于 2022-10-28 15:31:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_yuyu/article/details/127570539
版权

1、全局安装，npm i draw-page-structure -g

我这里用的是14.16.1版本的node，一切正常，一般来说14版本往上不会报错

在这里插入图片描述在这里插入图片描述

2、生成配置文件(初始化) dps init

在这里插入图片描述

这里可以直接 Ctrl+C—>回车 退出，路径后面到js文件中配置

在这里插入图片描述

3、修改 dps.config.js 进行相关配置

在这里插入图片描述

4、开始生成骨架屏 dps start

在这里插入图片描述
在这里插入图片描述

运行aaa.html查看效果图：

在这里插入图片描述

5、当然也可以生成自己页面的骨架屏

在这里插入图片描述

配置是这个样子

在这里插入图片描述

dps start运行

在这里插入图片描述

效果……好像差点事儿，反正大致流程是这样了，学会就自己玩吧

在这里插入图片描述

6、在这附个学习链接

里面有关配置说明，可以了解一下

z_yuyu
关注
react骨架屏自动生成_网页骨架屏自动生成方案（dps）
weixin_30789475的博客
12-24 744
什么是骨架屏什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构(灰色占位图)，在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然通畅...
对开发更友好的前端骨架屏自动生成方案
马蜂窝技术
09-05 2222
（马蜂窝技术原创内容，公众号 ID：mfwtech） 一份来自 Akamai 的研究报告显示，在对 1048 名网购户进行采访后发现： 约 47% 的用户期望他们的页面在两秒之内加载完成。 如果页面加载时间超过 3s，约 40% 的用户会选择离开或关闭页面。 一直以来，为了提升用户在页面加载时的体验，无论是 Web 还是 iOS、Android 的应用中，前端开发工程师都...
基于DOM的骨架屏自动生成方案
2401_84093054的博客
04-16 406
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。
SkeletonX：chrome插件：自动生成骨架屏
02-24
骷髅X 参考资料
create-skeleton-quickly:骨架屏自动生成可视化工具
05-28
create-skeleton-quickly 快速生成网页骨架屏的可视化工具。 支持同时生成多个网页的骨架屏代码。 提供了便捷的 CLI 命令，安装即用。 QuickStart npm i create-skeleton-quickly -g 方法一：打开可视化界面 csq run 5000 //谷歌会自动打开，其他浏览器需要手动 方法二：配置文件生成骨架屏代码 生成配置文件 csq init // 在当前文件夹创建skeleton.config.js 开始编译 csq start // 开始生成骨架屏代码 方法三：提供了扩展方法 const DrawPageStructure = require('create-skeleton-quickly'); new DrawPageStructure({ isAnimation: true, background: '#ecf
skeleton-chrome-extension:自动生成骨架屏的chrome插件
05-03
Skeleton Chrome Extension 介绍和效果可以点击： 《通过chrome插件自动生成骨架屏》进行查看
PageSkeleton是一款自动生成骨架页面的webpack插件
08-10
Page Skeleton 是一款 webpack 插件，在开发过程中，通过简单的点击操作，生成开发页面对应的骨架页面，并通过 webpack 将骨架页面打包到你的应用中，这样就能够在你的应用启动之前，看到页面的骨架结构了。
【Vue】骨架屏
jiahui55555的博客
01-28 891
前言 作为一位前端工(xiao)程(cai)师(niao)，用户体验一直都是首要问题。今天来研究一下骨架屏，由于前后端分离成为当下的主流，小前端们都面临着一个问题，就是程序初始化(一大堆乱七八糟的编译运算)的原因，最开始的一段时间会出现空白的情况。当前主要的解决方案是使用加载动画，意思就是在程序启动时就默认显示加载动画(如菊花图)，等到程序编译好并主要数据加载完成之后把加载动画隐藏掉。而骨架屏最...
网页骨架屏自动生成方案（dps）
MyFrontEnd
07-20 736
什么是骨架屏 什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。 假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然...
多路由骨架屏实现
weixin_44318256的博客
12-09 312
vue多路由骨架屏实现方案 京东dps 生成骨架屏 html + vue-skeleton-webpack-plugin 配置多路由 1.npm i draw-page-structure -g 2.npm install vue-skeleton-webpack-plugin -D 3.dps init生成配置文件，并修改 const path = require('path'); // 需要展示完成页面的地址，可以写本地调试地址 const url = 'https://www.baidu.com'
jquery.skeleton.loader：一个用于制作屏幕骨架加载器的jQuery插件
02-10
jquery.skeleton.loader（lo scheletrone） 一个用于制作屏幕骨架加载器的jQuery插件。 注意：骨架不是自动创建线框的工具……至少还没有:) 2013年，（ 首次讨论了在屏幕上体验中使用加载微调器的弊端，并称其为“骨架屏幕”。 骨架屏幕背后的概念是使用空页面，这些空页面在可用时逐渐填充内容-页面的不可变区域在加载时立即呈现，显示为中性色块，并逐渐被内容（例如图像，标题）取代以及界面标签。 （摘自非常好的文章） “ lo scheletrone”的目标是帮助那些希望在其站点中包括现有或新的骨架屏幕的用户。 内容 浏览器支持 我们确实在乎。 IE 8+ :heavy_check_mark: 最新 :heavy_check_mark: 最新 :heavy_check_mark: 最新 :heavy_check_mark: 最新 :heavy_check_mark: 入门 请参阅动作jquery.skeleton.loader插件或此笔： 有两个快速入门选项： 克隆仓库： git@github.com:jqu
A002-185-2531
GONGZIXUY的博客
01-05 1384
目录 第一页作业 2 1.1验收承认(acceptance) 2 1.2要求需要(requirement) 5 1.3最初形态(Prototype) 6 1.4Model(模型) 7 1.5异义词(Homonym) 8 1.6检查(Inspection) 8 1.7敏捷式项目管理(Agile project management) 9 1.8特征(Feature) 10 1.9实体(Entity) 12 1.10错误(Error) 14 第二页作业 15 2.1实现视图(implementation vie
探索新一代骨架屏生成利器：draw-page-structure
gitblog_00062的博客
05-16 435
探索新一代骨架屏生成利器：draw-page-structure 项目地址:https://gitcode.com/famanoder/dps 1、项目介绍 draw-page-structure 是一个简单而强大的工具，专为快速生成骨架屏（又称占位符屏幕）设计。它通过自动解析网页结构，帮助开发者轻松地实现动态加载内容时的平滑过渡效果，提升用户体验。这个开源项目不仅提供了命令行接口（CLI），还支...
探秘Ma-Skeleton：一个高效、可定制的前端页面骨架屏解决方案
gitblog_00070的博客
04-21 365
探秘Ma-Skeleton：一个高效、可定制的前端页面骨架屏解决方案 项目地址:https://gitcode.com/cytle/ma-skeleton 在现代Web开发中，用户体验成为了至关重要的元素。当我们打开一个网页时，如果需要等待很长时间才能看到任何内容，那么用户可能会感到厌烦并选择离开。为了解决这个问题，Ma-Skeleton 应运而生。这是一个轻量级、高度可定制的前端骨架屏生成器，...
万字长文——全自动可视化骨架屏生成工具流程全记录！
最新发布
XIAO_A_fighting的博客
05-18 1267
目前的App端开发大多采用H5+原生相结合，这种开发方式可在保证加载速度和页面稳定性的基础上最大化的降低开发成本， 因此xxxApp应用了此种开发模式。在App内所嵌套的H5页面相比于普通HTML页面，页面首屏渲染速度会更慢，因为对于App内嵌的H5页面，除本身的页面资源加载（HTML+CSS+JS等）还要进行webView的加载，也因此比起普通HTML页面，APP内嵌H5页面对于首屏渲染优化要求更高，所以前端更要尽可能的去进行首屏渲染优化，才能给用户一个流畅的使用感受。
react骨架屏自动生成_前端可视化工具（自动生成骨架屏代码）
weixin_36249618的博客
01-17 891
前世与今生自从前端三大框架React、Vue、Angular出道以来，前端开发面向工程化，同时工程化给前端开发带来的极大的便利。一些脚手架也因运而生，如create-react-app、vue-cli等单页脚手架。总所周知，单页的首屏体验一直不怎么样，特别是在弱网的情况下白屏时间太长，那怎么解决呢？可能骨架屏方案是个不错的选择。骨架屏解决了什么问题？如果用户在等待Js、Css等资源加载的时间内显示...
div生成图片_网页骨架屏自动生成方案（dps）
weixin_39842237的博客
11-21 236
什么是骨架屏？什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然通...
wpf page 界面渲染完成后执行自动操作_Vue项目骨架屏自动生成方案（dps）
weixin_39747087的博客
12-12 440
什么是骨架屏什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。 假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然通...
自动生成html_对开发更友好的前端骨架屏自动生成方案
weixin_39638526的博客
11-30 249
点击上方“马蜂窝技术”，关注订阅更多优质内容一份来自 Akamai 的研究报告显示，在对 1048 名网购户进行采访后发现：约 47% 的用户期望他们的页面在两秒之内加载完成。如果页面加载时间超过 3s，约 40% 的用户会选择离开或关闭页面。一直以来，为了提升用户在页面加载时的体验，无论是 Web 还是 iOS、Android 的应用中，前端开发工程师都做了许多工作。除了解决如何让网页...
draw-grid 下载
12-16
draw-grid是一个应用程序，用于在计算机屏幕上绘制网格。通过该应用程序，用户可以选择不同的网格大小和颜色，来绘制所需的网格。 要下载draw-grid应用程序，首先需要连接到互联网。在互联网浏览器中，输入“draw-grid下载”作为关键词进行搜索。搜索结果会显示出相关的下载链接。 点击合适的链接，进入相关的下载页面。根据下载页面的提示，选择适用于您的设备的版本，如Windows、Mac、Android等。 然后，点击下载按钮开始下载draw-grid应用程序。下载过程可能需要一些时间，具体时间取决于您的网络速度和文件大小。 下载完成后，在您的设备上找到下载的应用程序文件。对于Windows用户，可能是一个.exe文件；对于Mac用户，可能是一个.dmg文件；对于Android用户，可能是一个.apk文件。 双击打开应用程序文件，并按照安装向导的提示完成安装过程。通常，安装过程简单明了，只需点击“下一步”即可。 完成安装后，您将在您的设备上找到draw-grid应用程序的图标。点击图标启动应用程序，并开始使用它。 现在，您已成功下载并安装了draw-grid应用程序。通过该应用程序，您可以绘制出符合您需要的网格。祝您使用愉快！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

z_yuyu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值