CN116991530B - 一种具有交错收缩样式加载指示符的实现方法 - Google Patents
一种具有交错收缩样式加载指示符的实现方法 Download PDFInfo
- Publication number
- CN116991530B CN116991530B CN202311235958.4A CN202311235958A CN116991530B CN 116991530 B CN116991530 B CN 116991530B CN 202311235958 A CN202311235958 A CN 202311235958A CN 116991530 B CN116991530 B CN 116991530B
- Authority
- CN
- China
- Prior art keywords
- style
- indicator
- user
- indication
- component
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 238000009877 rendering Methods 0.000 claims abstract description 12
- 230000000694 effects Effects 0.000 claims abstract description 11
- 238000004806 packaging method and process Methods 0.000 claims abstract description 6
- 238000005538 encapsulation Methods 0.000 claims abstract description 3
- 238000007667 floating Methods 0.000 claims description 14
- 239000003086 colorant Substances 0.000 claims description 4
- 230000001133 acceleration Effects 0.000 claims description 3
- 238000012544 monitoring process Methods 0.000 claims description 2
- 230000006399 behavior Effects 0.000 description 14
- 238000000605 extraction Methods 0.000 description 9
- 238000007418 data mining Methods 0.000 description 6
- 238000005516 engineering process Methods 0.000 description 5
- 230000014509 gene expression Effects 0.000 description 5
- 208000019901 Anxiety disease Diseases 0.000 description 4
- 230000036506 anxiety Effects 0.000 description 4
- 230000008451 emotion Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 239000008280 blood Substances 0.000 description 3
- 210000004369 blood Anatomy 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 238000010801 machine learning Methods 0.000 description 3
- 235000012736 patent blue V Nutrition 0.000 description 3
- 230000004075 alteration Effects 0.000 description 2
- 230000036651 mood Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种具有交错收缩样式加载指示符的实现方法,所述方法包括:完成初始配置,获得封装组件、样式组件和加载组件;获取第一指示元素,所述第一指示元素包括指示文本、预计时间和进度提示;获取第一风格样式,基于所述样式组件和所述第一风格样式,将所述第一指示元素进行渲染,获得指示符;基于所述封装组件,将所述指示符进行封装,获得指示符组件;基于所述加载组件,加载所述指示符组件,将所述指示符组件中的所述指示符显示在页面。所述方法可以解决用户无法自定义指示符的指示内容和渲染效果,从而导致用户体验降低和用户流失的问题。
Description
技术领域
本发明涉及计算机技术领域,具体地,涉及一种具有交错收缩样式加载指示符的实现方法。
背景技术
用户每次进入一个新页面都需要从后台请求数据,数据返回到页面完成渲染,内容才会展示出来,这个过程需要时间,需要用户去等待,为了让用户感知加载的过程,通常需要添加一些指示符,告诉用户页面加载的过程正在进行,减少用户因等待而产生的焦虑情绪。随着计算机技术的发展,指示符的内容和渲染效果越来越多种多样,更加精致和人性化,有效的分散用户在等待过程中的注意力。但指示符的指示内容和渲染效果通常由程序员指定写入,用户无法自定义,当用户不喜欢当前指示符时,可能会降低用户体验从而导致流失用户。
发明内容
为了解决用户无法自定义指示符的指示内容和渲染效果,从而导致用户体验降低和用户流失的问题。
本发明提供了一种具有交错收缩样式加载指示符的实现方法,所述方法包括:完成初始配置,获得封装组件、样式组件和加载组件;获取第一指示元素,所述第一指示元素包括指示文本、预计时间和进度提示;获取第一风格样式,所述第一风格样式包括所述第一指示元素的动画效果、所述指示文本的字体类型、字体大小和字体颜色以及所述预计时间和所述进度提示的形状、尺寸和颜色,基于所述样式组件和所述第一风格样式,将所述第一指示元素进行渲染,获得指示符;基于所述封装组件,将所述指示符进行封装,获得指示符组件;基于所述加载组件,加载所述指示符组件,将所述指示符组件中的所述指示符显示在页面。完成初始开发环境和组件库配置,获得封装组件、样式组件和加载组件,获取用户自定义的第一指示元素和第一风格样式,基于所述样式组件,通过所述第一风格样式对所述第一指示元素进行渲染,获得指示符,基于所述封装组件,将所述指示符进行封装,获得指示符组件,基于所述加载组件,加载所述指示符组件中的所述指示符并将所述指示符显示在页面,可以实现用户自定义指示内容和渲染效果,提高用户体验。
在实施上述方案的过程中,申请人发现某些用户可能不太清楚想要怎样的指示符或者想直接设置一款喜欢的指示符,为了解决这一问题,申请人改进了所述方法,配置了用户数据库,用户数据库包含若干指示符,通过分析用户行为数据推荐用户可能喜欢的指示符。
进一步地,所述方法还包括:配置用户数据库,所述用户数据库包含若干第二指示元素和若干第二风格样式;获取用户行为数据;将所述用户行为数据进行分析获得关键特征,所述关键特征包括第一元素特征和第一风格特征;基于所述第一元素特征,获得所述用户数据库中与所述第一元素特征相对应的所述第二指示元素;将所述第一指示元素更新为所述第二指示元素;基于所述第一风格特征,获得所述用户数据库中与所述第一风格特征相对应的所述第二风格样式;将所述第一风格样式更新为所述第二风格样式。配置用户数据库,所述用户数据库包括若干指示元素和若干风格样式,通过分析用户行为数据推测用户可能喜欢的指示元素和风格样式,并将所述用户数据库中对应的指示元素和风格样式推荐给用户,可以帮助用户快速找到喜欢的指示符,节省用户自定义指示符的时间。
在实施上述方案的过程中,申请人发现某些场景下,用户页面与指示符风格不一致,导致页面整体风格不搭,为了解决这一问题,申请人改进了所述方法,配置了元素数据库和风格数据库,通过分析用户页面的显示内容推测所述元素数据库和所述风格数据库中与所述用户页面相匹配的指示元素和风格样式,使整个用户页面风格一致,提高用户体验。
进一步地,所述方法还包括:配置元素数据库,所述元素数据库包含若干第三指示元素,每一个所述第三指示元素对应一个第一元素指数;判断页面是否进入加载状态;若是,则获取所述页面的显示内容;分析所述显示内容获得第二元素特征,所述第二元素特征包含若干子元素特征,每一个所述子元素特征对应一个元素权重;基于若干所述子元素特征获得所述第二元素特征的元素权重值;基于所述元素权重值获得第二元素指数;获得与所述第二元素指数相对应的所述第一元素指数;获得所述元素数据库中与所述第一元素指数相对应的所述第三指示元素;将所述第一指示元素更新为所述第三指示元素。通过分析页面显示内容推荐和显示内容相匹配的指示元素,使整个页面的显示框架一致,可以提高页面框架的整体性和观看性。
进一步地,所述方法还包括:配置风格数据库,所述风格数据库包含若干第三风格样式,每一个所述第三风格样式对应一个第一风格指数;判断页面是否进入加载状态;若是,则获取所述页面的显示内容;分析所述显示内容获得第二风格特征,所述第二风格特征包含若干子风格特征,每一个所述子风格特征对应一个风格权重;基于若干所述子风格特征获得所述第二风格特征的风格权重值;基于所述风格权重值获得第二风格指数;获得与所述第二风格指数相对应的所述第一风格指数;获得所述风格数据库中与所述第一风格指数相对应的所述第三风格样式;将所述第一风格样式更新为所述第三风格样式。通过分析页面显示内容推荐和显示内容风格相匹配的风格样式,使整个页面的风格一致,可以提高页面风格的整体性和观看性。
在实施上述方案的过程中,申请人发现在某些场景下,用户需要等待较长的时间,期间用户可能会产生焦虑和烦躁,为了解决这一问题,申请人改进了所述方法,判断预计时间是否大于预设阈值,若是则分析用户页面的数据获得关键词,推荐用户与关键词相匹配的数据,从而减轻用户的烦躁情绪。
进一步地,所述方法还包括:判断所述预计时间是否大于第一阈值;若是则获取页面的数据进行分析获得关键词;获得与所述关键词相匹配的推荐数据,用于在用户等待状态下推荐用户需求数据。在较长的等待时间下,通过分析页面的数据推荐用户可能需要的数据,从而减轻用户的烦躁程度,提高用户体验。
在实施上述方案的过程中,申请人发现在某些场景下,用户需要迫切获得数据,从而不停的刷新页面希望快速获得页面数据,为了解决这一问题,申请人改进了所述方法,记录用户请求频率,判断请求频率是否大于预设阈值,若是则代表用户希望迫切获取页面数据,则通过服务器协调资源加快加载请求数据,安抚用户的焦虑情绪,提高用户体验。
进一步地,所述方法还包括:记录用户请求频率;判断所述频率是否大于第二阈值;若是则将所述指示符更新为加急指示符;基于所述加急指示符,服务器协调资源加快请求数据。所述加急指示符告知用户服务器已协调资源加快请求数据,可以安抚用户的急迫心情,提高用户的体验感。
在实施上述方案的过程中,申请人发现在某些场景下,用户在等待的同时也在其他页面或程序操作,而用户希望能在不切换页面或程序的情况下实时看到加载进程,为了解决这一问题,申请人改进了所述方法,将指示符以悬浮窗的形式显示在页面,便于用户实时查看加载进程。
进一步地,所述方法还包括:将所述指示符以悬浮窗的形式显示在页面;监听用户操作悬浮窗的行为指令;若收到所述行为指令,则将所述悬浮窗移动或隐藏。将指示符以悬浮窗的形式显示在页面,且所述悬浮窗可移动、可隐藏和可关闭,方便用户放置在页面任意位置实时查看,提高用户体验感。
在实施上述方案的过程中,申请人发现在某些场景下,请求数据快加载完成,而用户没有第一时间注意到,为了提示用户,申请人改进了所述方法,判断预计时间是否小于或等于预设阈值,若是则提示用户,可以让用户第一时间看到请求数据。
进一步地,所述方法还包括:判断所述预计时间是否小于或等于第三阈值;若是则所述指示符更新为倒计时指示符。通过倒计时指示符提示用户请求数据快加载完成,可以让用户第一时间预览页面信息,提高用户体验感。
在实施上述方案的过程中,申请人发现在某些场景下,用户等待的时间超过预计时间,则需要提示用户是否出现网络问题或服务器分配问题等,为了解决这一问题,申请人改进了所述方法,判断实时加载的时间是否大于预计时间,若是则更新所述指示符用于提示用户可能存在的网络问题或服务器问题,可以减少用户不必要的等待时间和加快请求数据进程。
进一步地,所述方法还包括:记录用户触发请求的请求时间戳和当前时间的时间戳;基于所述请求时间戳和所述时间戳,获得实时加载时间;判断实时加载时间是否大于所述预计时间;若是则将所述指示符更新为警示指示符。通过获取实时加载时间,判断实时加载时间是否大于预计时间,若大于则将所述指示符更新为警示指示符,提示用户加载过程中可能有问题存在,可以帮助用户解决这些问题从而加快请求进程,减少用户的等待时间。
在实施上述方案的过程中,申请人发现在某些场景下,用户在等待时可能不在页面前,请求数据加载完成用户也不知晓,为了解决这一问题,申请人改进了所述方法,将指示文本语音播放,用于提示用户已加载完成。
进一步地,所述方法还包括:将所述指示文本语音播放。
本发明提供的一个或多个技术方案,至少具有如下技术效果或优点:
1.获取用户自定义的指示内容和风格,可以实现用户自由选择指示符的内容和渲染效果,提高用户体验感。2.分析用户行为数据,推荐用户喜欢的指示符的内容和风格,可以实现用户快速配置指示符,提高用户体验感。3.分析页面的显示内容,推荐与页面相匹配的指示符,可以实现页面整体风格的一致性,提高用户观看感。4.在较长等待时间下,推荐用户需求数据,减缓用户焦虑的情绪。
附图说明
此处所说明的附图用来提供对本发明实施例的进一步理解,构成本发明的一部分,并不构成对本发明实施例的限定;
图1是本发明中一种具有交错收缩样式加载指示符的实现方法的步骤示意图;
图2是本发明中一种具有交错收缩样式加载指示符的实现方法中指示符与用户相匹配的步骤示意图;
图3是本发明中一种具有交错收缩样式加载指示符的实现方法中指示符与页面相匹配的步骤示意图。
具体实施方式
为了能够更清楚地理解本发明的上述目的、特征和优点,下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是,在相互不冲突的情况下,本发明的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本发明,但是,本发明还可以采用其他不同于在此描述范围内的其他方式来实施,因此,本发明的保护范围并不受下面公开的具体实施例的限制。
实施例1
参考图1,在本实施例中,配置CSS和JS语言的开发环境以及Antd库,创建css文件和tsx文件用于封装指示符;获取用户自定义的第一指示元素,所述指示元素包括指示文本、预计时间和进度提示,如指示文本可以为“加载中…”或“Loading…”,进度提示可以为进度条或进度百分比;获取用户自定义的第一风格样式,所述第一风格样式包括所述第一指示元素的动画效果、所述指示文本的字体类型、字体大小和字体颜色以及所述预计时间和所述进度提示的形状、尺寸和颜色,如所述指示文本“加载中…”的动画效果为字体闪烁或字体滚动,所述指示文本“加载中…”的字体为宋体,字体大小为16号,颜色为黑色,所述进度提示的形状为长方形,长度与所述指示文本的长度相等,颜色为绿色等,在css文件中将所述第一风格样式对应的实现代码写入body组件,通过所述body组件对所述第一指示元素进行渲染,获得指示符;在tsx文件中将所述指示符进行封装,获得指示符组件;获取Antd库的Spin组件,将所述指示符组件作为Spin组件的indicator属性,从而将所述指示符组件中的所述指示符显示在页面。本实施例中所述第一指示元素还可以为用户导入的图片、动画或视频等,所述CSS和JS语言可以为HTML5或JSP等其他实现语言,所述body组件可以为自定义组件、CSS语言或JS语言提供的属性或第三方组件,所述tsx文件可以为vue文件或js文件,Spin组件可以为VUE的extend组件或其他第三方库的组件。
实施例2
参考图2,在实施例一的基础上,在本实施例中,配置用户数据库,所述用户数据库包含若干第二指示元素和若干第二风格样式;通过网络爬虫获取用户行为数据,通过数据挖掘算法分析所述用户行为数据获得第一元素特征,如浏览次数、搜索次数、最近阅读、位置记录、高频使用和兴趣爱好等,通过网页抽取方法抓取所述用户行为数据的第一风格特征,如喜好颜色、喜好风格和页面布局等;通过正则匹配表达式匹配所述用户数据库中与所述第一元素特征相对应的所述第二指示元素和与所述第一风格特征相对应的所述第二风格样式,将所述第一指示元素和所述第一风格样式分别更新为所述第二指示元素和所述第二风格样式。本实施例中,网络爬虫可以为聚焦爬虫技术、通用爬虫技术、增量爬虫技术或深层网络爬虫技术等,也可以为爬虫工具,数据挖掘算法可以为机器学习算法、超文本分类与聚类算法或网页分析算法等,网页抽取方法可以为基于正则表达式的网页抽取、基于CSS选择器的网页抽取、基于XPATH的网页抽取或基于机器学习的网页抽取等,正则匹配表达式也可以为特征的相似度比较。
本实施例中,举例说明,如通过数据挖掘算法分析用户行为数据,获得近期用户浏览次数最多的为热血动漫,则所述第一元素特征为热血动漫,通过网页抽取方法抓取用户行为数据,获得用户近期购买的物品蓝色次数最多,则所述第一风格特征为蓝色,再通过正则匹配表达式匹配所述用户数据库中与热血动漫相对应的所述第二指示元素和与蓝色相对应的所述第二风格样式,如所述第二指示元素可以为一个动漫人物和一句热血的指示文本,所述第二风格样式可以为天蓝色,将所述第一指示元素和所述第一风格样式分别更新为所述第二指示元素和所述第二风格样式,在css文件中将天蓝色对应的实现代码写入body组件,通过所述body组件对所述动漫人物进行渲染,获得指示符,如一个动漫人物穿着天蓝色衣服,下方的指示文本内容为“我先去前方杀出一条路”。
实施例3
参考图3,在上述实施例的基础上,在本实施例中,配置元素数据库和风格数据库,所述元素数据库包含若干第三指示元素,如指示文本、卡通、动物、物品、预计时间、进度条和进度百分比等,每一个所述第三指示元素对应一个第一元素指数,如指示文本对应的第一元素指数为1,人物对应的第一元素指数为2,所述风格数据库包含若干第三风格样式,如简洁风格、墨水风格、炫彩风格、中国风风格、文艺风格、可爱风格和商务风格等,每一个所述第三风格样式对应一个第一风格指数,如简洁风格对应的第一风格指数为1、墨水风格对应的第一风格指数为2;通过JS语言实现的自定义方法判断页面是否进入加载状态,若是则通过网络爬虫获取所述页面的显示内容;通过数据挖掘算法分析所述显示内容获得第二元素特征,所述第二元素特征包含若干子元素特征,每一个所述子元素特征对应一个元素权重,通过网页抽取方法抓取所述显示内容获得第二风格特征,所述第二风格特征包含若干子风格特征,每一个所述子风格特征对应一个风格权重;通过计算所有所述子元素特征的元素权重和所有所述子风格特征的风格权重,获得所述第二元素特征的元素权重值和所述第二风格特征的风格权重值,通过所述元素权重值和所述风格权重值获得相对应的第二元素指数和第二风格指数;通过所述第二元素指数和所述第二风格指数获得相对应的所述第一元素指数和所述第一风格指数;再获得所述元素数据库中与所述第一元素指数相对应的所述第三指示元素和所述风格数据库中与所述第一风格指数相对应的所述第三风格样式,分别将所述第一指示元素和所述第一风格样式更新为所述第三指示元素和所述第三风格样式。
本实施例中,举例说明,如当前页面的内容为某个公司的产品页面,通过数据挖掘算法分析所述显示内容获得主题,文本关键词,页面图形框和图片数量等获得第二元素特征,如所述第二元素特征包含主题特征、文本特征、图形特征和图片特征,所述第二元素特征包含若干子元素特征,每一个所述子元素特征对应一个元素权重,如图形特征包括矩形特征、圆形特征和卡通特征等,其中矩形特征、圆形特征和卡通特征分别对应的权重为0.1,0.1和0.2,累计所有所述子元素特征的元素权重获得所述第二元素特征的元素权重值,如元素权重值为2.4,则在0~4区间的元素权重值对应的所述第二元素指数为1,在0~2区间的所述第二元素指数对应的所述第一元素指数为1,获取所述元素数据库中对应所述第一元素指数等于1的所述第三指示元素,如获得指示文本。
通过网页抽取方法抓取所述显示内容获得色彩、布局、图片数量和样式种类等获得第二风格特征,如所述第二风格包括色彩特征、布局特征、图片特征和样式特征等,所述第二风格特征包含若干子风格特征,每一个所述子风格特征对应一个风格权重,如色彩特征包括色彩数量特征、色彩比例特征和色彩布局特征等,其中色彩数量特征、色彩比例特征和色彩布局特征分别对应的权重为0.3,0.2和0.1;通过计算所有所述子风格特征的风格权重,获得所述第二风格特征的风格权重值,如风格权重值为3.6,则在2~4区间的风格权重值对应的所述第二风格指数为2,在1~2区间的所述第二风格指数对应的所述第一风格指数为2,获取所述元素数据库中对应所述第一风格指数等于2的所述第三风格样式,如获得商务风格。
实施例4
在上述实施例的基础上,在本实施例中,获取服务器返回的加载页面的预计时间,判断所述预计时间是否大于第一阈值,若是则通过网络爬虫获取页面数据,通过数据挖掘算法分析页面数据获得关键词,通过正则匹配表达式获得与所述关键词相匹配的推荐网页,用于在用户等待状态下推荐用户需求数据。本实施例中,也可以通过机器学习等算法获得推荐模型推测用户需求的数据,也可以推荐用户近期热播电视剧、高分电影或娱乐游戏等。
实施例5
在上述实施例的基础上,在本实施例中,记录用户请求加载的频率,判断所述频率是否大于第二阈值,若是则将所述指示符更新为加急指示符,如“加载中…”更新为“加急为您加载中…稍等喔”,同时触发服务器协调资源加快请求数据。
实施例6
在上述实施例的基础上,在本实施例中,通过自定义开发语言实现所述指示符以悬浮窗的形式显示在页面,通过事件监听器监听用户操作悬浮窗的行为指令,若收到所述行为指令,则将所述悬浮窗根据用户鼠标或键盘等操作移动或隐藏,点击所述悬浮窗时可将其关闭。本实施例中,自定义开发语言可以为JS语言、Python语言或Java语言等。
实施例7
在上述实施例的基础上,在本实施例中,获取服务器返回的加载页面的预计时间,判断所述预计时间是否小于或等于第三阈值,若是则所述指示符更新为倒计时指示符,如“加载中…”更新为“加载倒计时10…”,同时页面窗口高亮并闪烁提示用户请求数据快加载完成。
实施例8
在上述实施例的基础上,在本实施例中,记录用户触发请求时的请求时间戳和当前时间的时间戳,通过计算当前时间的时间戳和请求时间戳的时间差,获得实时加载时间,判断实时加载时间是否大于所述预计时间,若是则将所述指示符更新为警示指示符,如“加载中…”更新为“加载速度过低,请检查网络问题”,提示用户加载过程中可能有网络等问题存在。
实施例9
在上述实施例的基础上,在本实施例中,将所述指示符的文本内容语音播放,如将“正在加载中…”或“加载完成”语音播放。本实施例中,语音播放的文本内容可以为用户自定义文本,也可以是用户导入的音频,语音播放的音色可以为用户自定义。
尽管已描述了本发明的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例作出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然,本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样,倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内,则本发明也意图包含这些改动和变型在内。
Claims (9)
1.一种具有交错收缩样式加载指示符的实现方法,其特征在于,所述方法包括:
完成初始配置,获得封装组件、样式组件和加载组件;
配置元素数据库,所述元素数据库包含若干第一指示元素,所述第一指示元素包括指示文本、预计时间和进度提示,每一个所述第一指示元素对应一个第一元素指数;
判断页面是否进入加载状态;
若是,则获取所述页面的显示内容;
分析所述显示内容获得第二元素特征,所述第二元素特征包含若干子元素特征,每一个所述子元素特征对应一个元素权重;
基于若干所述子元素特征获得所述第二元素特征的元素权重值;
基于所述元素权重值获得第二元素指数;
获得与所述第二元素指数相对应的所述第一元素指数;
获得所述元素数据库中与所述第一元素指数相对应的所述第一指示元素;
获取第一风格样式,所述第一风格样式包括所述第一指示元素的动画效果、所述指示文本的字体类型、字体大小和字体颜色以及所述预计时间和所述进度提示的形状、尺寸和颜色,基于所述样式组件和所述第一风格样式,将所述第一指示元素进行渲染,获得指示符;
基于所述封装组件,将所述指示符进行封装,获得指示符组件;
基于所述加载组件,加载所述指示符组件,将所述指示符组件中的所述指示符显示在页面。
2.根据权利要求1所述的一种具有交错收缩样式加载指示符的实现方法,其特征在于,所述方法还包括:
配置用户数据库,所述用户数据库包含若干第二指示元素和若干第二风格样式;
获取用户行为数据;
将所述用户行为数据进行分析获得关键特征,所述关键特征包括第一元素特征和第一风格特征;
基于所述第一元素特征,获得所述用户数据库中与所述第一元素特征相对应的所述第二指示元素;
将所述第一指示元素更新为所述第二指示元素;
基于所述第一风格特征,获得所述用户数据库中与所述第一风格特征相对应的所述第二风格样式;
将所述第一风格样式更新为所述第二风格样式。
3.根据权利要求1所述的一种具有交错收缩样式加载指示符的实现方法,其特征在于,所述方法还包括:
配置风格数据库,所述风格数据库包含若干第三风格样式,每一个所述第三风格样式对应一个第一风格指数;
判断页面是否进入加载状态;
若是,则获取所述页面的显示内容;
分析所述显示内容获得第二风格特征,所述第二风格特征包含若干子风格特征,每一个所述子风格特征对应一个风格权重;
基于若干所述子风格特征获得所述第二风格特征的风格权重值;
基于所述风格权重值获得第二风格指数;
获得与所述第二风格指数相对应的所述第一风格指数;
获得所述风格数据库中与所述第一风格指数相对应的所述第三风格样式;
将所述第一风格样式更新为所述第三风格样式。
4.根据权利要求1所述的一种具有交错收缩样式加载指示符的实现方法,其特征在于,所述方法还包括:
判断所述预计时间是否大于第一阈值;
若是则获取页面的数据进行分析获得关键词;
获得与所述关键词相匹配的推荐数据,用于在用户等待状态下推荐用户需求数据。
5.根据权利要求1所述的一种具有交错收缩样式加载指示符的实现方法,其特征在于,所述方法还包括:
记录用户请求频率;
判断所述频率是否大于第二阈值;
若是则将所述指示符更新为加急指示符;
基于所述加急指示符,服务器协调资源加快请求数据。
6.根据权利要求1所述的一种具有交错收缩样式加载指示符的实现方法,其特征在于,所述方法还包括:
将所述指示符以悬浮窗的形式显示在页面;
监听用户操作悬浮窗的行为指令;
若收到所述行为指令,则将所述悬浮窗移动或隐藏。
7.根据权利要求1所述的一种具有交错收缩样式加载指示符的实现方法,其特征在于,所述方法还包括:
判断所述预计时间是否小于或等于第三阈值;
若是则所述指示符更新为倒计时指示符。
8.根据权利要求1所述的一种具有交错收缩样式加载指示符的实现方法,其特征在于,所述方法还包括:
记录用户触发请求的请求时间戳和当前时间的时间戳;
基于所述请求时间戳和所述时间戳,获得实时加载时间;
判断实时加载时间是否大于所述预计时间;
若是则将所述指示符更新为警示指示符。
9.根据权利要求1所述的一种具有交错收缩样式加载指示符的实现方法,其特征在于,所述方法还包括:
将所述指示文本语音播放。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311235958.4A CN116991530B (zh) | 2023-09-25 | 2023-09-25 | 一种具有交错收缩样式加载指示符的实现方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311235958.4A CN116991530B (zh) | 2023-09-25 | 2023-09-25 | 一种具有交错收缩样式加载指示符的实现方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN116991530A CN116991530A (zh) | 2023-11-03 |
CN116991530B true CN116991530B (zh) | 2023-12-01 |
Family
ID=88532366
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202311235958.4A Active CN116991530B (zh) | 2023-09-25 | 2023-09-25 | 一种具有交错收缩样式加载指示符的实现方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN116991530B (zh) |
Citations (14)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101523335A (zh) * | 2006-10-02 | 2009-09-02 | 诺基亚公司 | 用于用户界面的视觉愉悦性 |
CN103365761A (zh) * | 2012-03-09 | 2013-10-23 | 苹果公司 | 进度条 |
CN105574207A (zh) * | 2016-01-21 | 2016-05-11 | 上海谦讯网络科技有限公司 | 一种wap网页开发方法 |
CN105893074A (zh) * | 2015-12-14 | 2016-08-24 | 乐视移动智能信息技术(北京)有限公司 | 进度条优化方法及装置 |
US9519999B1 (en) * | 2013-12-10 | 2016-12-13 | Google Inc. | Methods and systems for providing a preloader animation for image viewers |
CN106599175A (zh) * | 2016-12-12 | 2017-04-26 | 北京奇虎科技有限公司 | 网页元素的显示处理方法及装置 |
EP3364292A1 (de) * | 2017-02-20 | 2018-08-22 | Gebauer GmbH | Verfahren zur generierung einer zur laufzeit dynamischen benutzerschnittstelle |
CN109739599A (zh) * | 2018-12-27 | 2019-05-10 | 苏州浪潮智能软件有限公司 | 一种基于canvas的产品界面的互动轮盘插件 |
CN112015482A (zh) * | 2020-07-20 | 2020-12-01 | 北京达佳互联信息技术有限公司 | 页面加载方法、装置及服务器 |
CN112487330A (zh) * | 2020-11-23 | 2021-03-12 | 广州经传多赢投资咨询有限公司 | 基于xml的ui换肤方法、系统、装置及存储介质 |
CN112597416A (zh) * | 2020-12-18 | 2021-04-02 | 北京达佳互联信息技术有限公司 | 网页元素的显示方法、装置、服务器和存储介质 |
CN114282129A (zh) * | 2021-12-01 | 2022-04-05 | 京东科技控股股份有限公司 | 信息系统页面生成方法、系统、电子设备及存储介质 |
CN114912039A (zh) * | 2022-04-19 | 2022-08-16 | 北京字节跳动网络技术有限公司 | 一种搜索特效展示方法、装置、设备及介质 |
CN115797508A (zh) * | 2022-11-17 | 2023-03-14 | 深圳市迅雷网文化有限公司 | 一种实时动态动画生成方法、装置、设备及存储介质 |
-
2023
- 2023-09-25 CN CN202311235958.4A patent/CN116991530B/zh active Active
Patent Citations (14)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101523335A (zh) * | 2006-10-02 | 2009-09-02 | 诺基亚公司 | 用于用户界面的视觉愉悦性 |
CN103365761A (zh) * | 2012-03-09 | 2013-10-23 | 苹果公司 | 进度条 |
US9519999B1 (en) * | 2013-12-10 | 2016-12-13 | Google Inc. | Methods and systems for providing a preloader animation for image viewers |
CN105893074A (zh) * | 2015-12-14 | 2016-08-24 | 乐视移动智能信息技术(北京)有限公司 | 进度条优化方法及装置 |
CN105574207A (zh) * | 2016-01-21 | 2016-05-11 | 上海谦讯网络科技有限公司 | 一种wap网页开发方法 |
CN106599175A (zh) * | 2016-12-12 | 2017-04-26 | 北京奇虎科技有限公司 | 网页元素的显示处理方法及装置 |
EP3364292A1 (de) * | 2017-02-20 | 2018-08-22 | Gebauer GmbH | Verfahren zur generierung einer zur laufzeit dynamischen benutzerschnittstelle |
CN109739599A (zh) * | 2018-12-27 | 2019-05-10 | 苏州浪潮智能软件有限公司 | 一种基于canvas的产品界面的互动轮盘插件 |
CN112015482A (zh) * | 2020-07-20 | 2020-12-01 | 北京达佳互联信息技术有限公司 | 页面加载方法、装置及服务器 |
CN112487330A (zh) * | 2020-11-23 | 2021-03-12 | 广州经传多赢投资咨询有限公司 | 基于xml的ui换肤方法、系统、装置及存储介质 |
CN112597416A (zh) * | 2020-12-18 | 2021-04-02 | 北京达佳互联信息技术有限公司 | 网页元素的显示方法、装置、服务器和存储介质 |
CN114282129A (zh) * | 2021-12-01 | 2022-04-05 | 京东科技控股股份有限公司 | 信息系统页面生成方法、系统、电子设备及存储介质 |
CN114912039A (zh) * | 2022-04-19 | 2022-08-16 | 北京字节跳动网络技术有限公司 | 一种搜索特效展示方法、装置、设备及介质 |
CN115797508A (zh) * | 2022-11-17 | 2023-03-14 | 深圳市迅雷网文化有限公司 | 一种实时动态动画生成方法、装置、设备及存储介质 |
Non-Patent Citations (3)
Title |
---|
"基于隐喻认知的互联网产品反馈机制设计研究";邓滔;《中国优秀硕士学位论文全文数据库 (工程科技Ⅱ辑)》;第C028-91页 * |
"人机交互等待状态的视觉反馈设计研究";方年丽;《中国优秀硕士学位论文全文数据库 (信息科技辑)》;第I140-5页 * |
DIV+CSS在网页设计中的应用方法;李双远;马勘;;吉林化工学院学报(第09期);第101-104页 * |
Also Published As
Publication number | Publication date |
---|---|
CN116991530A (zh) | 2023-11-03 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
Akpınar et al. | Vision based page segmentation algorithm: Extended and perceived success | |
US10185782B2 (en) | Mode identification for selective document content presentation | |
CN111857517B (zh) | 视频的信息处理方法、装置、电子设备及存储介质 | |
US20150213514A1 (en) | Systems and methods for providing modular configurable creative units for delivery via intext advertising | |
US8347225B2 (en) | System and method for selectively displaying web page elements | |
US20090077056A1 (en) | Customization of search results | |
US11907644B2 (en) | Detecting compatible layouts for content-based native ads | |
KR20190128117A (ko) | 토픽과 관련된 컨텐츠 아이템들의 제시를 위한 시스템 및 방법 | |
EP2266054A2 (en) | Method and apparatus for selecting related content for display in conjunction with a media | |
CN111523289B (zh) | 一种文本格式生成方法、装置、设备和可读介质 | |
US9471558B2 (en) | Generation of introductory information page | |
CN105589852A (zh) | 一种信息推荐的方法和装置 | |
CN111159431A (zh) | 基于知识图谱的信息可视化方法、装置、设备及存储介质 | |
US11656745B1 (en) | Flexibly identifying and playing media content from any webpage | |
US20240330581A1 (en) | Method for automatically generating responsive media | |
CN114730341A (zh) | 保护在本地应用的用户界面数据收集中的用户隐私 | |
Boi et al. | Reconstructing user’s attention on the web through mouse movements and perception-based content identification | |
CN116991530B (zh) | 一种具有交错收缩样式加载指示符的实现方法 | |
CN112100501A (zh) | 信息流的处理方法、装置及电子设备 | |
CN112905921A (zh) | 一种页面内容显示方法及装置 | |
CN117112888A (zh) | 用于使用可扩展流水线生成实况事件的故事的系统和方法 | |
KR101976306B1 (ko) | 웹 페이지 작성 지원 장치, 및 기억 매체 | |
CN112597416A (zh) | 网页元素的显示方法、装置、服务器和存储介质 | |
CN111580907A (zh) | 一种ai属性显示方法、显示装置及计算机可读存储介质 | |
Bradford et al. | HTML5 mastery: Semantics, standards, and styling |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |