基于饿了么骨架屏方案，使用Chrome扩展程序生成网页骨架屏

最新推荐文章于 2024-02-27 09:40:49 发布
最新推荐文章于 2024-02-27 09:40:49 发布
阅读量444 收藏
点赞数
分类专栏： JS 文章标签： js css html svg gwt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34998786/article/details/114684234
版权
本文介绍了一种使用Chrome扩展程序生成网页骨架屏的方法，以解决首屏加载时的空白问题。参照饿了么的骨架屏方案，该扩展能够根据设定的参数，通过覆盖指定元素的颜色快速生成骨架屏。文章还探讨了骨架屏的原理，容器和块的概念，以及如何处理css冗余样式和冗余DOM结构。
摘要由CSDN通过智能技术生成

前言

❝

之前写移动端项目的时候，使用骨架屏来解决首屏渲染时出现短暂空白现象，采用了就是饿了么page-skeleton-webpack-plugin方法

❞

但是page-skeleton-webpack-plugin需要puppeteer这个依赖，这玩意会导致整个项目在开发阶段很笨重,而且不是所有的页面都要用到骨架屏，后面找了套方案，决定使用谷歌插件代替puppeteer

Chrome扩展程序生成网页骨架屏

❝

谷歌插件下载

❞
image.png

最新版本下载地址，还未通过谷歌官方审核, PS: 谷歌插件如何安装，自行谷歌

效果图

最低0.47元/天 解锁文章
落落落落克
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
（亲测）vue-cli项目添加骨架屏多种方式，自动生成骨架屏
zhouzuoluo的博客
09-06 9569
vue-cli项目首页加载缓慢想要使用骨架屏效果，经过几天的踩坑，这里学习并记录一下vue项目自动生成骨架屏方法。 添加骨架屏，其优势在于： 写于HTML文件中，独立于Vue框架，节省了JS加载时间+JS全局环境创建的执行时间的时间 只在主页面根据页面结构独立编写，预先展示页面结构，进行视觉暂留，提供更好的交互感官 只在页面结构变化时进行修改，维护成本相对较低 骨架屏的作用主要是在网...
一个前端非侵入式骨架屏自动生成方案
前端下午茶
09-13 119
作者：前端冒菜师原文：https://juejin.cn/post/7143502980040359950背景性能优化、减少页面加载时间、提升用户体验，是前端领域的一个永恒话题。在前后端分离、异步渲染在页面中被普遍应用的背景下，大量页面在用户访问时不可避免的会出现一段短时间白屏。目前的解决方案一般为以下几种：服务端同步渲染增加页面 loading增加页面首屏骨架屏这几种方案各有优缺点，服务端同步渲...
rect可以存到容器中么_饿了么开源的骨架屏插件原理分析
weixin_39913422的博客
11-30 141
Skeleton Screen(骨架屏)指的在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于内容列表页。一、page-skeleton-webpack-pluginpage-skeleton-webpack-plugin是一款由ElemeFE团队开发的webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面...
骨架屏原理——面试别再被挨打了
果冻
04-14 9466
前言 同样是之前练手项目中的，emmm,知道干嘛用的，没了解过具体原理，面试时加上紧张😓，那简直被吊打的感觉，现在来先初步总结一波，后面有时间再配上资源 骨架屏是什么 同样的，首先遇到的问题是什么呢？现在的前端开发领域，都是前后端分离，首先我们拿到数据后，页面渲染以及等待的白屏时间，成为我们需要解决的问题点；而且大项目，这个问题尤为突出。webpack可以实现按需加载，减小我们首屏需要加载的代码体积；再配合上 CDN 以及一些静态代码（框架，组件库等等…）缓存技术，可以很好的缓解这个加载渲染的时间过长
android 骨架屏刷新动画,ios - 原生骨架屏，网络加载过渡动画的封装
weixin_34944897的博客
05-26 239
效果图闪光灯模式骨架屏模式经典动画模式闪光灯动画.gif只有骨架屏.gif经典动画.gif本项目思维导图思维导图.JPG说明本文将介绍如何将demo集成到你的项目中均为个人思考，转载请注明出处，谢谢简要说明一般情况下，移动端在展示服务器端数据时需要经历创建视图 - 请求数据 - 得到数据并展示 三个步骤本框架在未获得到数据的这段空档期内，根据视图已有的位置信息，映射出一组相同的CALayer视图以...
如何在微信小程序中使用骨架屏的步骤
10-15
在微信小程序中实现骨架屏，通常有两种方案： 1. **定制静态页面**： - 这种方法需要为每个需要骨架屏的页面单独设计一套静态页面，用灰色或低饱和度的颜色块代替实际内容。 - 骨架屏页面应与实际内容页面布局...
微信小程序骨架屏入门代码
03-17
1. 填写建议:骨架屏的简单入门...3.使用学习目标:了解微信小程序如何使用骨架屏 4.应用场景:微信小程序 数据展示过程中加载缓慢 实现加载流。 5.特点:简化骨架屏代码实现过程 6.适用人群:想使用骨架屏的初学者 简单示例
SkeletonX：chrome插件：自动生成骨架屏
02-24
SkeletonX 是一个基于 TypeScript 开发的 Chrome 插件，它能自动为网页生成骨架屏（Skeleton Screen），在页面数据加载过程中提供平滑的用户体验。骨架屏是一种优化网页加载时视觉反馈的技术，它通过展示页面布局的...
小程序如何构建骨架屏
10-16
然而，由于小程序环境的限制，不能直接使用Puppeteer，但可以通过小程序的初始数据和模板来渲染出一个基础结构，用作骨架屏。 获取节点是指在预渲染过程中，收集页面中各个元素的布局和样式信息。在H5中，这通常...
page-skeleton-webpack-plugin：Webpack插件可自动生成框架页面
02-27
:bright_button: 自动生成骨架页面 :crescent_moon: Webpack插件可帮助您构建更好JavaScript应用程序 || || | | | 特征 Page Skeleton是一个webpack插件，该插件的目的是根据项目中的不同路由页面生成相应的骨架屏幕页面，并通过webpack将骨架屏幕页面打包到相应的静态路由页面中。 支持多种加载动画 在手机上预览 支持多条路线 可以自定义，也可以直接在预览页面中修改骨架页面源代码 几乎零配置 加载动画 旋转 闪耀 Chiaroscuro 加快比赛 例子 所有示例都在examples文件夹中。 安装 使用npm安装此插件，还需要安装 。 npm install --save-dev page-skeleton-webpack-plugin npm install --save-dev html-webpack-plugin 基本用途 步骤1：配置 根据上述教程安装插件
page-web-skeleton-crx插件
04-01
语言:中文 (简体) 一键生成骨架屏create web skeleton in first screen基于饿了么骨架屏方案改造，目前适配移动端方案1.打开网页2.点击应用图标，选择生成骨架屏3.会自动生成当前页面的骨架屏内
PageSkeleton是一款自动生成骨架页面的webpack插件
08-10
Page Skeleton 是一款 webpack 插件，在开发过程中，通过简单的点击操作，生成开发页面对应的骨架页面，并通过 webpack 将骨架页面打包到你的应用中，这样就能够在你的应用启动之前，看到页面的骨架结构了。
小程序骨架屏
03-08
骨架屏是一种优化用户体验的技术，尤其在小程序中，它能在数据加载...在项目`skeleton-master`中，很可能是提供了一套小程序骨架屏的解决方案，包括预设的模板和动态生成的逻辑，帮助开发者快速集成到自己的小程序中。
纯h5+css 骨架屏
最新发布
qiaolezi787的博客
02-27 168
实现纯h5+css 骨架屏效果。
如何实现骨架屏效果？
小陈的博客
09-20 3489
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
自动化生成骨架屏的技术方案设计与落地
全栈前端精选
11-19 1239
❝个人文章集：https://github.com/Nealyang/PersonalBlog主笔公众号：全栈前端精选❞背景性能优化，减少页面加载等待时间一直是前端领域永恒的话题。如今大部...
page-skeleton-webpack-plugin骨架屏的使用
weixin_43021174的博客
04-02 1179
1 下载依赖 npm install --save-dev page-skeleton-webpack-plugin npm install --save-dev html-webpack-plugin 2 在vue.config.js里面如下配置 // 骨架屏开始 const HtmlWebpackPlugin = require('html-webpack-plugin') const { SkeletonPlugin } = require('page-skeleton-webpack-plugi
基于page-skeleton-webpack-plugin分析自动生成骨架屏原理
weixin_33795093的博客
03-25 4612
一、page-skeleton-webpack-pluginpage-skeleton-webpack-plugin是一款由ElemeFE团队开发的webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。二、插件自动生成骨架屏的主要原理通过无头浏览器puppeteer打开要生成骨架屏的页面等待页面渲染完后注...
微信小程序骨架屏详细使用
04-02
微信小程序骨架屏是一种提高小程序加载速度和用户体验的技术，它通过在页面加载时先展示...以上就是微信小程序骨架屏的详细使用方法，通过使用骨架屏可以提高小程序的用户体验和加载速度，让用户更加愉悦地使用小程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值