当前位置: 首页 > news >正文

electron Tab加载动画开启和关闭

 记个开发中的bug,以此为鉴。眼懒得时候手勤快点儿,不要想当然!!!

没有转载的价值,请勿转载搬运呦。

WebContents API:

Event: 'did-finish-load'​

导航完成时触发,即选项卡的旋转器将停止旋转,并指派onload事件后。

Event: 'did-stop-loading'​

当tab中的旋转指针(spinner)结束旋转时,就会触发该事件。

复现步骤:

  1. 使用账号登录客户端系统。
  2. 点击菜单栏菜单,跳转其他系统页面正常,在此页面点击打开任意链接,一直停留在加载动画页面

截图:

原因分析:

页面打开时,loading加载动画及时关闭(did-finish-load),在本页面跳转时,loading动画没有及时关闭(did-finish-load生命周期没有执行到)

根据此情况又增加了几个生命周期,代码执行情况如下:

this.browserViewList[`${arg.applicationKey}`].webContents.on('did-start-loading',() => {_this.browserViewList[`${arg.applicationKey}`].webContents.send('loading-show')log.info('did-start-loading')})//did-stop-loadingthis.browserViewList[`${arg.applicationKey}`].webContents.on('did-stop-loading',() =>_this.browserViewList[`${arg.applicationKey}`].webContents.send('loading-hide'))//dom-readythis.browserViewList[`${arg.applicationKey}`].webContents.on('dom-ready',() => log.info('dom-ready'))//did-frame-finish-loadthis.browserViewList[`${arg.applicationKey}`].webContents.on('did-frame-finish-load',() => log.info('did-frame-finish-load'))//did-finish-load监听加载完成---隐藏loading====>此事件新打开页面会执行,在打开页面链接跳转时不会执行this.browserViewList[`${arg.applicationKey}`].webContents.on('did-finish-load',() => log.info('did-finish-load'))

跳转1.0系统打开页面执行的生命周期

在1.0系统跳转链接执行生命周期

解决方案:

修改动画关闭的生命周期为did-stop-loading

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Linux命令-cal命令(显示当前日历或指定日期的日历)
  • 网络防火墙综合实验
  • 论文精读--word2vec
  • LeetCode--代码详解 21.合并两个有序链表
  • Itext生成pdf文件,html转pdf时中文一直显示不出来
  • 五种多目标优化算法(MOJS、MOGWO、NSWOA、MOPSO、NSGA2)性能对比,包含6种评价指标,9个测试函数(提供MATLAB代码)
  • 【AI视野·今日CV 计算机视觉论文速览 第297期】Thu, 25 Jan 2024
  • Linux命令:stat命令
  • CTFshow web(SQL注入176-179)
  • 海鹰数据:Shopee卖家的利器,助力选品决策
  • Quantitative Analysis: PIM Chip Demands for LLAMA-7B inference
  • Python算法100例-1.10 数制转换
  • Stable Diffusion 模型下载:Dark Sushi Mix 大颗寿司Mix
  • java面试多线程篇
  • 深度学习图像算法工程师--面试准备(1)
  • 【EOS】Cleos基础
  • 【mysql】环境安装、服务启动、密码设置
  • 【node学习】协程
  • 8年软件测试工程师感悟——写给还在迷茫中的朋友
  • Android框架之Volley
  • CSS相对定位
  • express + mock 让前后台并行开发
  • java小心机(3)| 浅析finalize()
  • JS变量作用域
  • RedisSerializer之JdkSerializationRedisSerializer分析
  • SpiderData 2019年2月16日 DApp数据排行榜
  • 从零开始学习部署
  • 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • ------- 计算机网络基础
  • 记录一下第一次使用npm
  • 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶
  • 深入浅出webpack学习(1)--核心概念
  • 小程序开发中的那些坑
  • 以太坊客户端Geth命令参数详解
  • 优秀架构师必须掌握的架构思维
  • gunicorn工作原理
  • mysql 慢查询分析工具:pt-query-digest 在mac 上的安装使用 ...
  • raise 与 raise ... from 的区别
  • ​Redis 实现计数器和限速器的
  • # 利刃出鞘_Tomcat 核心原理解析(七)
  • ######## golang各章节终篇索引 ########
  • #、%和$符号在OGNL表达式中经常出现
  • #QT(智能家居界面-界面切换)
  • #WEB前端(HTML属性)
  • (1)安装hadoop之虚拟机准备(配置IP与主机名)
  • (14)Hive调优——合并小文件
  • (6)STL算法之转换
  • (6)设计一个TimeMap
  • (C#)Windows Shell 外壳编程系列4 - 上下文菜单(iContextMenu)(二)嵌入菜单和执行命令...
  • (CVPRW,2024)可学习的提示:遥感领域小样本语义分割
  • (PADS学习)第二章:原理图绘制 第一部分
  • (阿里云万网)-域名注册购买实名流程
  • (草履虫都可以看懂的)PyQt子窗口向主窗口传递参数,主窗口接收子窗口信号、参数。
  • (二)斐波那契Fabonacci函数
  • (机器学习-深度学习快速入门)第一章第一节:Python环境和数据分析