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-loading
      this.browserViewList[`${arg.applicationKey}`].webContents.on(
        'did-stop-loading',
        () =>
          _this.browserViewList[`${arg.applicationKey}`].webContents.send(
            'loading-hide'
          )
      )
      //dom-ready
      this.browserViewList[`${arg.applicationKey}`].webContents.on(
        'dom-ready',
        () => log.info('dom-ready')
      )
      //did-frame-finish-load
      this.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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/397829.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开发消息多发工具需要用到的源代码

在数字化时代,消息传递是许多应用程序的核心功能之一,从社交媒体到企业通信,从个人聊天到群发消息,消息传递无处不在,为了满足这种需求,开发者经常需要创建或定制消息多发工具。 这些工具通常需要处理多个…

算法刷题:找到字符串中所有的字母异位词

找到字符串中所有的字母异位词 .题目链接题目详情题目解析算法原理滑动窗口流程图定义指针及变量进窗口判断出窗口更新结果 我的答案 . 题目链接 找到字符串中所有的字母异位词 题目详情 题目解析 所谓的异位词,就是一个单词中的字母,打乱顺序,重新排列得到的单词 如:abc-&g…

【AI学习】LangChain学习

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

如何画架构图:从概念到实践

如何画架构图:从概念到实践 在软件开发和系统设计中,架构图是一种重要的工具,它能够帮助开发人员和利益相关者更好地理解系统的结构和组件之间的关系。但是,对于许多人来说,画架构图可能是一个挑战。本文将探讨如何有…

分布式id实战

目录 常用方式 特征 潜在问题 信息安全 高性能 UUID 雪花算法 数据库生成 美团Leaf方案 Leaf-segment 数据库方案 Leaf-snowflake 方案 常用方式 uuid雪花算法数据库主键 特征 全局唯一趋势递增信息安全 潜在问题 信息安全 如果id连续递增, 容易被爬虫, 批量下…

字典树Trie 简介和相关例题分析

一.字典树定义 概念:字典树(TrieTree),是一种树形结构,典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串,如01字典树)。主要思想是利用字符串的公共前缀来节约存储空间…

【运维】站点可靠性工程介绍:研发,运维,SRE,Devops的关系

文章目录 1、什么是SRE2、SRE与研发、运维的区别 1、什么是SRE 站点可靠性工程(SRE) 是 IT 运维的软件工程方案。 SRE 团队使用软件作为工具,来管理系统、解决问题并实现运维任务自动化。 SRE 执行的任务以前通常由运维团队手动执行&#x…

网络运行安全

网络运行安全 第一节 一般规定 第二十一条 国家实行网络安全等级保护制度。网络运营者应当按照网络安全等级保护制度的要求,履行下列安全保护义务,保障网络免受干扰、破坏或者未收授权的访问,防止网络数据泄露或者被窃取、篡改: 制定内部安全管理制度和操作规程,确定网络…

深度学习图像算法工程师--面试准备(1)

1 请问人工神经网络中为什么 ReLU 要好过于 tanh 和 Sigmoid function? 采⽤Sigmoid 等函数,算激活函数时(指数运算),计算量⼤,反向传播求误差梯度时,求导涉及除法和指数运算,计算量…

【常识】大数据设计基础知识

底层存储:hadoop(hdfsmapreduce) Hadoop已经有十几年的历史,它是大数据领域的存储基石,HDFS目前仍然没有成熟替代品;MapR 文件系统在业内已经具有一定知名度了,不仅 MapR 宣布它自己的文件系统比 HDFS 快2-…

十三、集合进阶——单列集合 及 数据结构

单列集合 及 数据结构 13.1 集合体系结构13.1.2 单列集合1. Collection2.Collection 的遍历方式迭代器遍历增强for遍历Lambda表达式遍历 3.List集合List集合的特有方法List集合的遍历方式五种遍历方式对比 4.数据结构1).栈2).队列3)数组4)链表小结5&…

嵌入式学习-qt-Day1

嵌入式学习-qt-Day1 一、思维导图 二、作业 1.自由发挥登录窗口的应用场景,实现一个登录窗口界面 #include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {//字体设置QFont font1;//创建字体对象1font1.setWeight(QFont::Bold);//字体…

普法:正当防卫,保护自己

今天该换一换口味了,所以本“人民体验官”推广人民日报官方微博《警察小哥科普第二十条指什么》。 图:来源“人民体验官”推广平台 电影《第二十条》片名,取自刑法第二十条规定。这一法条具体写了什么?对我们的生活有何影响&…

《白话C++》第10章 STL和boost,Page105 enable_shared_from_this

说到“循环引用”,其中“自己对自己”的引用是最直接的循环引用,如图10-12所示。 而说到“自己”,在C语言中应该首先想到的类的“this”指针。不过,this指针是裸指针,如果我们在类中,需要传递当前对象本身&…

【嵌入式-Keil】keil代码提示快捷键

CTRL空格 如果没有提示,可能跟输入法的快捷键冲突, 右键->设置->按键->勾掉第一个就行了 再按CTRL空格就有提示了 参考:串口发送&串口发送接收

Vue | (三)使用Vue脚手架(中)| 尚硅谷Vue2.0+Vue3.0全套教程

文章目录 📚Todo-list 案例🐇组件化编码流程(通用)🐇实现静态组件🐇展示动态数据🐇交互⭐️添加一个todo⭐️todo勾选实现⭐️删除功能实现⭐️底部统计功能实现⭐️底部全选功能实现⭐️底部一…

【黑马程序员】C++文件操作

20240220 文章目录 文件操作背景文件分类操作文件的三大类 文本文件写文件写文件步骤文件打开方式代码示例 读文件读文件步骤代码示例 写二进制文件写二进制文件步骤代码示例 读二进制文件代码示例 文件操作 背景 程序运行时产生的数据都属于临时数据,程序一旦运行…

TypeScript(三):TypeScript面向对象

TypeScript面向对象 类的定义 与JS不同的是,成员属性需要在前面进行提前声明 class Person{//需要在前面对成员变量进行声明name: string//声明的时候,可以对值进行初始化,初始化可以带有类型注解,也可以省略age 18//construc…

基于YOLOv7算法和Widerperson数据集的高精度实时行人检测系统(PyTorch+Pyside6+YOLOv7)

摘要:基于YOLOv7算法和Widerperson数据集的高精度实时行人检测系统可用于日常生活中检测与定位行人目标,此系统可完成对输入图片、视频、文件夹以及摄像头方式的目标检测与识别,同时本系统还支持检测结果可视化与导出。本系统采用YOLOv7目标检…

3个密码学相关的问题

一、离散对数问题(Discrete Logarithm Problem, DLP) 问题描述:给定 有限阿贝尓群 G中的2个元素a和b,找出最小的正整数x满足:b a ^^ x (或者证明这样的x不存在)。 二、阶数问题(O…