System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() 显示目标页面图像元素切换方法、装置、设备及介质制造方法及图纸_技高网

显示目标页面图像元素切换方法、装置、设备及介质制造方法及图纸

技术编号:40949336 阅读:2 留言:0更新日期:2024-04-18 20:23
本申请涉及一种显示目标页面图像元素切换方法、装置、设备及介质,应用于图像处理技术领域,其方法包括:响应于用户的目标页面图像切换操作,获取当前图像信息和图像切换方向;基于所述当前图像信息和所述图像切换方向确定目标页面图像;获取所述目标页面图像的图像渲染信息和图像显示位置;基于所述图像渲染信息和所述目标页面图像生成切换元素;获取切换动画信息,基于所述切换动画信息和所述目标页面图像确定目标切换动画;基于所述目标切换动画和所述切换方向将所述切换元素切换至所述图像显示位置。本申请具有提高图像页面的响应显示速度的效果。

【技术实现步骤摘要】

本申请涉及图像处理的,尤其是涉及一种显示目标页面图像元素切换方法、装置、设备及介质


技术介绍

1、随着网络的不断发展,越来越多的人们选择通过网络进行资料的查阅和休闲娱乐,其中,图像被浏览的频率尤为庞大。

2、对于现有web技术的图像切换来说,页面一次渲染多个图像元素时,存在页面卡顿的情况, 图像懒加载可以解决图像请求的问题,但不能解决图像列表的渲染,从而使得图像页面卡顿的情况依旧存在。


技术实现思路

1、为了提高图像页面的响应显示速度,本申请提供一种显示目标页面图像元素切换方法、装置、设备及介质。

2、第一方面,本申请提供一种显示目标页面图像元素切换方法,采用如下的技术方案:

3、一种显示目标页面图像元素切换方法,包括:

4、响应于用户的目标页面图像切换操作,获取当前图像信息和图像切换方向;

5、基于所述当前图像信息和所述图像切换方向确定目标页面图像;

6、获取所述目标页面图像的图像渲染信息和图像显示位置;

7、基于所述图像渲染信息和所述目标页面图像生成切换元素;

8、获取切换动画信息,基于所述切换动画信息和所述目标页面图像确定目标切换动画;

9、基于所述目标切换动画和所述切换方向将所述切换元素切换至所述图像显示位置。

10、通过采用上述技术方案,由于目标页面图像再页面创建时,已经根据实际的需求将全部的图像进行排列,即已经具备预设图像列表,在进行切换时,根据用户的切换操作,能够确定图像切换方向,并且根据图像切换方向和当前图像信息确定即将要在页面中进行显示的目标页面图像,之后根据渲染信息对目标页面图像进行渲染处理,得到将要进行显示的切换元素,然后确定将切换元素移动至图像显示位置使用的目标切换动画,然后进行切换操作,在进行切换时只对即将进行切换的图像进行渲染和处理,从而提高了图像页面的响应显示速度。

11、可选的,所述基于所述图像渲染信息和所述目标页面图像生成切换元素包括:

12、获取所述目标页面图像的元素容器;

13、基于所述图像渲染信息对所述元素容器进行渲染操作,生成渲染容器;

14、将所述渲染容器与所述目标页面图像进行组装,生成切换元素。

15、可选的,所述基于所述切换动画信息和所述目标页面图像确定目标切换动画包括:

16、获取所述目标页面图像的在预设图像列表中的图像位置;

17、基于所述图像位置和所述切换动画信息确定未使用切换动画;

18、判断所述未使用切换动画的动画数量是否为一;

19、若所述未使用切换动画的动画数量为一,则将所述未使用切换动画作为目标切换动画;

20、若所述未使用切换动画的动画数量不为一,则获取所述目标页面图像的图像属性;

21、基于所述图像属性计算与所述未使用切换动画的匹配度;

22、选取所述匹配度最大的未使用切换动画作为目标切换动画。

23、可选的,所述基于所述目标切换动画和所述切换方向将所述切换元素切换至所述图像显示位置包括:

24、获取所述目标切换动画的执行时长和所述切换元素的元素尺寸;

25、基于所述执行时长和所述元素尺寸计算切换速度;

26、基于所述切换速度将所述切换元素按照所述切换方向切换至所述图像显示位置。

27、可选的,还包括:

28、获取显示页面信息;

29、基于所述显示页面信息判断是包含小图显示列表;

30、若包含小图显示列表,则获取所述目标页面图像的小图图像、小图显示列表信息和小图显示信息;

31、基于所述小图图像和所述小图显示列表信息对所述小图显示信息进行调整。

32、可选的,所述小图显示列表信息包括显示列表尺寸;所述基于所述小图图像和所述小图显示列表信息对所述小图显示信息进行调整包括:

33、获取所述小图图像的图像尺寸和小图位置;

34、基于所述图像尺寸和所述显示列表尺寸计算所述小图图像的显示数量;

35、基于所述显示数量和所述小图位置判断所述小图图像是否能够完全显示;

36、若所述小图图像不能够完全显示,则基于所述小图位置和所述显示数量计算移动尺寸;

37、基于所述图像切换方向和所述移动尺寸对所述小图显示信息进行调整。

38、可选的,在所述基于所述目标切换动画和所述切换方向将所述切换元素切换至所述图像显示位置之后,还包括:

39、判断所述切换动画是否已执行完成;

40、若所述切换动画已执行完成,则获取切换元素的上一切换元素;

41、删除所述上一切换元素;

42、若所述切换动画为执行完成,则重复所述判断所述切换动画是否已执行完成的步骤。

43、第二方面,本申请提供一种显示目标页面图像元素切换装置,采用如下的技术方案:

44、一种显示目标页面图像元素切换装置,包括:

45、切换方向获取模块,用于响应于用户的目标页面图像切换操作,获取当前图像信息和图像切换方向;

46、目标图像确定模块,用于基于所述当前图像信息和所述图像切换方向确定目标页面图像;

47、信息位置获取模块,用于获取所述目标页面图像的图像渲染信息和图像显示位置;

48、切换元素生成模块,用于基于所述图像渲染信息和所述目标页面图像生成切换元素;

49、切换动画确定模块,用于获取切换动画信息,基于所述切换动画信息和所述目标页面图像确定目标切换动画;

50、切换元素切换模块,用于基于所述目标切换动画和所述切换方向将所述切换元素切换至所述图像显示位置。

51、通过采用上述技术方案,由于目标页面图像再页面创建时,已经根据实际的需求将全部的图像进行排列,即已经具备预设图像列表,在进行切换时,根据用户的切换操作,能够确定图像切换方向,并且根据图像切换方向和当前图像信息确定即将要在页面中进行显示的目标页面图像,之后根据渲染信息对目标页面图像进行渲染处理,得到将要进行显示的切换元素,然后确定将切换元素移动至图像显示位置使用的目标切换动画,然后进行切换操作,在进行切换时只对即将进行切换的图像进行渲染和处理,从而提高了图像页面的响应显示速度。

52、第三方面,本申请提供一种电子设备,采用如下的技术方案:

53、一种电子设备,包括处理器,所述处理器与存储器耦合;

54、所述处理器用于执行所述存储器中存储的计算机程序,以使得所述电子设备执行第一方面任一项所述的显示目标页面图像元素切换方法的计算机程序。

55、第四方面,本申请提供一种计算机可读存储介质,采用如下的技术方案:

56、一种计算机可读存储介质,存储有能够被处理器加载并执行第一方面任一项所述的显示目标页面图本文档来自技高网...

【技术保护点】

1.一种显示目标页面图像元素切换方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,所述基于所述图像渲染信息和所述目标页面图像生成切换元素包括:

3.根据权利要求1所述的方法,其特征在于,所述基于所述切换动画信息和所述目标页面图像确定目标切换动画包括:

4.根据权利要求1所述的方法,其特征在于,所述基于所述目标切换动画和所述切换方向将所述切换元素切换至所述图像显示位置包括:

5.根据权利要求1所述的方法,其特征在于,还包括:

6.根据权利要求5所述的方法,其特征在于,所述小图显示列表信息包括显示列表尺寸;所述基于所述小图图像和所述小图显示列表信息对所述小图显示信息进行调整包括:

7.根据权利要求1所述的方法,其特征在于,在所述基于所述目标切换动画和所述切换方向将所述切换元素切换至所述图像显示位置之后,还包括:

8.一种显示目标页面图像元素切换装置,其特征在于,包括:

9.一种电子设备,其特征在于,包括处理器,所述处理器与存储器耦合;

10.一种计算机可读存储介质,其特征在于,包括计算机程序或指令,当所述计算机程序或指令在计算机上运行时,使得所述计算机执行如权利要求1至7任一项所述的方法。

...

【技术特征摘要】

1.一种显示目标页面图像元素切换方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,所述基于所述图像渲染信息和所述目标页面图像生成切换元素包括:

3.根据权利要求1所述的方法,其特征在于,所述基于所述切换动画信息和所述目标页面图像确定目标切换动画包括:

4.根据权利要求1所述的方法,其特征在于,所述基于所述目标切换动画和所述切换方向将所述切换元素切换至所述图像显示位置包括:

5.根据权利要求1所述的方法,其特征在于,还包括:

6.根据权利要求5所述的方法,其特征在于,所述小图显示列表...

【专利技术属性】
技术研发人员:李浩真
申请(专利权)人:天津异乡好居网络科技股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1