CN113791716A - 图片的显示方法、装置、电子设备及计算机可读介质 - Google Patents
图片的显示方法、装置、电子设备及计算机可读介质 Download PDFInfo
- Publication number
- CN113791716A CN113791716A CN202011400291.5A CN202011400291A CN113791716A CN 113791716 A CN113791716 A CN 113791716A CN 202011400291 A CN202011400291 A CN 202011400291A CN 113791716 A CN113791716 A CN 113791716A
- Authority
- CN
- China
- Prior art keywords
- picture
- current
- rendered
- list
- page
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 238000009877 rendering Methods 0.000 claims description 39
- 238000004590 computer program Methods 0.000 claims description 9
- 230000004044 response Effects 0.000 claims description 9
- 238000010586 diagram Methods 0.000 description 12
- 230000008569 process Effects 0.000 description 12
- 238000012545 processing Methods 0.000 description 8
- 238000004891 communication Methods 0.000 description 6
- 230000006870 function Effects 0.000 description 6
- 230000008859 change Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000000694 effects Effects 0.000 description 3
- 230000001960 triggered effect Effects 0.000 description 3
- 230000009471 action Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000000903 blocking effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000006073 displacement reaction Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
本公开涉及一种图片的显示方法、装置、电子设备及计算机可读介质,属于计算机技术领域。该方法包括:获取当前显示图片的图片类型,并获取当前显示图片在当前图片类型中的索引序号;根据当前图片类型以及当前显示图片在当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数;响应作用于当前显示图片上的图片滑动操作,根据图片滑动操作和图片显示参数从待渲染图片列表中确定下一显示图片;显示下一显示图片,并根据下一显示图片对应的图片类型,以及下一显示图片在图片类型中的索引序号,更新待渲染图片列表和图片显示参数。本公开通过待渲染图片列表控制实际渲染图片的数量,可以在滑动图片时实现无缝衔接,提升图片浏览的流畅度。
Description
技术领域
本公开涉及计算机技术领域,具体而言,涉及一种图片的显示方法、图片的显示装置、电子设备及计算机可读介质。
背景技术
在一些软件、相册或小程序中,经常有大量图片需要进行展示,用户在点开其中某一张图片之后,可以通过横向滑动切换操作,浏览前后的其他图片。
但是现有的图片切换操作,在每次进行图片切换时,会有屏幕闪动的问题。另外,在网络状况较差、图片较大或者内存有限的情况下,也会影响图片切换的流畅度,出现卡顿的情况。
鉴于此,本领域亟需一种能够提升图片切换流畅度的图片的显示方法。
需要说明的是,在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解,因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。
发明内容
本公开的目的在于提供一种图片的显示方法、图片的显示装置、电子设备及计算机可读介质,进而至少在一定程度上提升图片切换的流畅度,减少内存占用。
根据本公开的第一个方面,提供一种图片的显示方法,包括:
获取当前显示图片的当前图片类型,并获取所述当前显示图片在所述当前图片类型中的索引序号;
根据所述当前图片类型,以及所述当前显示图片在所述当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数;
响应作用于所述当前显示图片上的图片滑动操作,根据所述图片滑动操作和所述图片显示参数从所述待渲染图片列表中确定下一显示图片;
显示所述下一显示图片,并根据所述下一显示图片对应的图片类型,以及所述下一显示图片在所述图片类型中的索引序号,更新所述待渲染图片列表和所述图片显示参数。
在本公开的一种示例性实施例中,所述获取所述当前显示图片在所述当前图片类型中的索引序号,包括:
获取所述当前显示图片在所述当前图片类型中的排列序号,以及所述当前图片类型中每一页的图片数量;
根据所述当前显示图片在所述当前图片类型中的排列序号,以及所述每一页的图片数量,确定所述当前显示图片在所述当前图片类型中的页码,以及所述当前显示图片在当前页码中的排列序号;
将所述当前显示图片在所述当前图片类型中的页码,以及所述当前显示图片在当前页码中的排列序号,作为所述当前显示图片在所述当前图片类型中的索引序号。
在本公开的一种示例性实施例中,所述根据所述当前图片类型,以及所述当前显示图片在所述当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数,包括:
根据所述当前显示图片在所述当前图片类型中的索引序号,从对应的图片类型中获取相关页码的图片数据,并将所述图片数据存入指定的图片数据列表中;
根据所述当前显示图片在所述当前图片类型中的索引序号确定所述图片显示参数,并从所述图片数据列表中获取所述当前显示图片对应的待渲染图片,得到待渲染图片列表。
在本公开的一种示例性实施例中,所述根据所述当前显示图片在所述当前图片类型中的索引序号,从对应的图片类型中获取相关页码的图片数据,并将所述图片数据存入指定的图片数据列表中,包括:
根据所述当前显示图片在所述当前图片类型中的页码,获取当前页码中的图片数据,并将所述当前页码中的图片数据存入当前页图片列表中;
在所述当前显示图片在当前页码中的排列序号为初始排列序号时,获取所述当前页码对应的上一页码中的图片数据,并将所述上一页码中的图片数据存入上一页图片列表中;
在所述当前显示图片在当前页码中的排列序号为末尾排列序号时,获取所述当前页码对应的下一页码中的图片数据,并将所述下一页码中的图片数据存入下一页图片列表中。
在本公开的一种示例性实施例中,所述获取所述当前页码对应的上一页码中的图片数据,包括:
若所述当前显示图片在所述当前图片类型中的页码为初始页码,则获取所述当前图片类型对应的上一图片类型中最后一页的图片数据,作为所述当前页码对应的上一页码中的图片数据;
若所述当前显示图片在所述当前图片类型中的页码为除所述初始页码之外的其他页码,则直接从所述当前图片类型中获取所述当前页码对应的上一页码中的图片数据。
在本公开的一种示例性实施例中,所述获取所述当前页码对应的下一页码中的图片数据,包括:
若所述当前显示图片在所述当前图片类型中的页码为末尾页码,则获取所述当前图片类型对应的下一图片类型中第一页的图片数据,作为所述当前页码对应的下一页码中的图片数据;
若所述当前显示图片在所述当前图片类型中的页码为除所述末尾页码之外的其他页码,则直接从所述当前图片类型中获取所述当前页码对应的下一页码中的图片数据。
在本公开的一种示例性实施例中,所述图片显示参数包括所述当前显示图片对应的滑动参数和渲染标识参数,所述根据所述当前显示图片在所述当前图片类型中的索引序号确定所述图片显示参数,并从所述图片数据列表中获取所述当前显示图片对应的待渲染图片,得到待渲染图片列表,包括:
在所述当前显示图片为所有图片类型中的第一个图片类型,并且在所述第一个图片类型中的页码为初始页码,在所述初始页码中的排列序号为初始排列序号时,将所述滑动参数设置为第一滑动参数,将所述渲染标识参数设置为第一渲染标识参数,并从所述当前页图片列表中,以所述当前显示图片对应的初始排列序号为始,向后依次获取与所述待渲染图片列表长度相同的图片数据作为待渲染图片,其中,所述第一滑动参数表示所述当前显示图片不能循环滑动;
在所述当前显示图片为所有图片类型中的最后一个图片类型,并且在所述最后一个图片类型中的页码为末尾页码,在所述末尾页码中的排列序号为末尾排列序号时,将所述滑动参数设置为第一滑动参数,将所述渲染标识参数设置为第三渲染标识参数,并从所述当前页图片列表中,以所述当前显示图片对应的末尾排列序号为始,向前依次获取与所述待渲染图片列表长度相同的图片数据作为待渲染图片;
除上述两种情况以外,则将所述滑动参数设置为第二滑动参数,将所述渲染标识参数设置为第二渲染标识参数,并根据所述排列序号从所述图片数据列表中获取与所述待渲染图片列表长度相同的图片数据作为待渲染图片,其中,所述第二滑动参数表示所述当前显示图片能够循环滑动。
在本公开的一种示例性实施例中,所述根据所述排列序号从所述图片数据列表中获取与所述待渲染图片列表长度相同的图片数据作为待渲染图片,包括:
在所述当前显示图片在当前页码中的排列序号为初始排列序号时,从所述当前页图片列表和所述上一页图片列表中获取所述与所述待渲染图片列表长度相同的图片数据作为待渲染图片;
在所述当前显示图片在当前页码中的排列序号为末尾排列序号时,从所述当前页图片列表和所述下一页图片列表中获取所述与所述待渲染图片列表长度相同的图片数据作为待渲染图片;
除上述两种情况以外,则直接从所述当前页图片列表中获取所述与所述待渲染图片列表长度相同的图片数据作为待渲染图片。
在本公开的一种示例性实施例中,所述响应作用于所述当前显示图片上的图片滑动操作,根据所述图片滑动操作和所述图片显示参数从所述待渲染图片列表中确定下一显示图片,包括:
当作用于所述当前显示图片上的图片滑动操作为第一滑动操作时,响应作用于所述当前显示图片上的第一滑动操作,根据所述当前显示图片的渲染标识参数,从所述待渲染图片列表中获取所述当前显示图片的前一待渲染图片,作为下一显示图片;
当作用于所述当前显示图片上的图片滑动操作为第二滑动操作时,响应作用于所述当前显示图片上的第二滑动操作,根据所述当前显示图片的图片显示参数,从所述待渲染图片列表中获取所述当前显示图片的后一待渲染图片,作为下一显示图片。
根据本公开的第二方面,提供一种图片的显示装置,包括:
图片信息获取模块,用于获取当前显示图片的当前图片类型,并获取所述当前显示图片在所述当前图片类型中的索引序号;
待渲染图片列表确定模块,用于根据所述当前图片类型,以及所述当前显示图片在所述当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数;
图片滑动操作模块,用于响应作用于所述当前显示图片上的图片滑动操作,根据所述图片滑动操作和所述图片显示参数从所述待渲染图片列表中确定下一显示图片;
待渲染图片列表更新模块,用于显示所述下一显示图片,并根据所述下一显示图片对应的图片类型,以及所述下一显示图片在所述图片类型中的索引序号,更新所述待渲染图片列表和所述图片显示参数。
根据本公开的第三方面,提供一种电子设备,包括:处理器;以及存储器,用于存储所述处理器的可执行指令;其中,所述处理器配置为经由执行所述可执行指令来执行上述任意一项所述的图片的显示方法。
根据本公开的第四方面,提供一种计算机可读介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现上述任意一项所述的图片的显示方法。
本公开示例性实施例可以具有以下有益效果:
本公开示例实施方式的图片的显示方法中,通过根据每个图片的图片类型以及索引序号,确定对应的待渲染图片列表和图片显示参数,并根据图片滑动操作从待渲染图片列表中确定出下一显示图片,并对图片显示参数和待渲染图片列表中的数据进行实时更新,可以在用户浏览图片的过程中控制实际渲染的图片数量,节省内存,并在滑动图片时实现图片的无缝切换和无缝衔接,以达到图片切换过程中无卡顿的目的,从而提升用户浏览图片时的流畅度,优化用户体验。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施例,并与说明书一起用于解释本公开的原理。显而易见地,下面描述中的附图仅仅是本公开的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1示出了可以应用本发明实施例的一种图片的显示方法及装置的示例性系统架构的示意图;
图2示出了本公开示例实施方式的图片的显示方法的流程示意图;
图3示出了本公开示例实施方式的获取当前显示图片索引序号的流程示意图;
图4示意性示出了根据本公开的一个具体实施方式的图片的显示方法的系统结构说明图;
图5示出了本公开示例实施方式的确定当前的待渲染图片列表和图片显示参数的流程示意图;
图6示出了本公开示例实施方式的确定当前的图片数据列表的流程示意图;
图7示出了本公开示例实施方式的图片的显示装置的框图;
图8示出了适于用来实现本公开实施方式的电子设备的计算机系统的结构示意图。
具体实施方式
现在将参考附图更全面地描述示例实施方式。然而,示例实施方式能够以多种形式实施,且不应被理解为限于在此阐述的范例;相反,提供这些实施方式使得本公开将更加全面和完整,并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中,提供许多具体细节从而给出对本公开的实施方式的充分理解。然而,本领域技术人员将意识到,可以实践本公开的技术方案而省略所述特定细节中的一个或更多,或者可以采用其它的方法、组元、装置、步骤等。在其它情况下,不详细示出或描述公知技术方案以避免喧宾夺主而使得本公开的各方面变得模糊。
此外,附图仅为本公开的示意性图解,并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分,因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体,不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体,或在一个或多个硬件模块或集成电路中实现这些功能实体,或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
图1示出了可以应用本发明实施例的一种图片的显示方法及装置的示例性应用环境的系统架构的示意图。
如图1所示,系统架构100可以包括移动终端101、102、103中的多个,网络104和服务器105。网络104用以在移动终端101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型,例如无线通信链路等。
应该理解,图1中的移动终端、网络和服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的移动终端、网络和服务器。比如服务器105可以是多个服务器组成的服务器集群等。
移动终端101、102、103可以是具有处理器的各种电子设备,包括但不限于智能手机、平板电脑、便携式计算机等等。服务器105可以是提供各种服务的服务器。例如移动终端101、102、103可以通过处理获取当前显示图片的当前图片类型以及当前显示图片在当前图片类型中的索引序号,并向服务器105上传获取到的内容。服务器105可以根据移动终端101、102、103上传的当前图片类型,以及当前显示图片在当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数,并响应作用于当前显示图片上的图片滑动操作,根据图片滑动操作和图片显示参数从待渲染图片列表中确定下一显示图片。然后,服务器105可以将所确定的下一显示图片发送至移动终端101、102、103进行显示,再根据下一显示图片对应的图片类型,以及下一显示图片在图片类型中的索引序号,更新待渲染图片列表和图片显示参数。移动终端101、102、103也可以通过处理器完成从获取当前显示图片的当前图片类型以及当前显示图片在当前图片类型中的索引序号,一直到显示下一显示图片,并根据下一显示图片对应的图片类型,以及下一显示图片在图片类型中的索引序号,更新待渲染图片列表和图片显示参数的全部过程。
对于一些软件、相册或小程序来说,经常会有大量图片需要进行展示,用户在图片列表打开其中某一张图片之后,可以通过横向滑动切换操作,在画廊中依次浏览其他图片。
在一些相关的实施例中,图片的切换和显示,通常可以采用如下2种方式实现。
1、监听图片在触摸事件中的touchStart(触摸开始)、touchMove(接触点改变)、touchEnd(触摸结束)事件。在touchStart事件中获取触摸事件的起始坐标。在touchMove事件中,获取触摸事件的实时坐标,判断滑动方向,将图片做位移处理。在touchEnd事件中,获取触摸事件的终止坐标,如果终止坐标–起始坐标大于一定的阈值,则请求数据获取上一张/下一张图片。
2、一次性请求大量图片,采用swiper(软件小程序中的滑块视图容器)组件一次性渲染所有图片,从而在图片切换操作中实现图片横滑的效果。
然而,在上述相关的实施例中,每次进行图片切换时,会有屏幕闪动的问题。另外,每次图片切换均会有数据请求,在网络状况较差或图片较大的情况下,会影响图片切换的流畅度。在touchMove手指未离开屏幕的过程中,无法预览到上/下一张图片,造成页面的不完整。除此之外,由于小程序占用内存有限,一次性渲染大量图片会占用大量内存,造成小程序崩溃的结果,因此,上述方案不适用于大量图片切换的场景,并且对图片数量有一定的制约。
针对上述问题,本示例实施方式首先提供了一种图片的显示方法。参考图2所示,上述图片的显示方法可以包括以下步骤:
步骤S210.获取当前显示图片的当前图片类型,并获取当前显示图片在当前图片类型中的索引序号。
步骤S220.根据当前图片类型,以及当前显示图片在当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数。
步骤S230.响应作用于当前显示图片上的图片滑动操作,根据图片滑动操作和图片显示参数从待渲染图片列表中确定下一显示图片。
步骤S240.显示下一显示图片,并根据下一显示图片对应的图片类型,以及下一显示图片在图片类型中的索引序号,更新待渲染图片列表和图片显示参数。
本公开示例实施方式的图片的显示方法中,通过根据每个图片的图片类型以及索引序号,确定对应的待渲染图片列表和图片显示参数,并根据图片滑动操作从待渲染图片列表中确定出下一显示图片,并对图片显示参数和待渲染图片列表中的数据进行实时更新,可以在用户浏览图片的过程中控制实际渲染的图片数量,节省内存,并在滑动图片时实现图片的无缝切换和无缝衔接,以达到图片切换过程中无卡顿的目的,从而提升用户浏览图片时的流畅度,优化用户体验。
下面,结合图3至图6对本示例实施方式的上述步骤进行更加详细的说明。
在步骤S210中,获取当前显示图片的当前图片类型,并获取当前显示图片在当前图片类型中的索引序号。
本示例实施方式中,待显示图片通常需要根据多种不同的类别分别进行展示,例如,在汽车类小程序中,图片类型可以分为汽车外观图片、汽车内饰图片等等;在房产类小程序中,图片类型可以分为房屋内部图片、小区环境图片等等。
本示例实施方式中,可以将每一类型中的所有图片划分为若干页,这样一来,图片的索引序号指的就是,该图片在当前图片类型中,排列在第几页的第几个位置,例如,在汽车类小程序中,某一方向盘图片的索引序号为汽车内饰图片类型中第三页的第一张图片。
本示例实施方式中,如图3所示,获取当前显示图片在当前图片类型中的索引序号,具体可以包括以下几个步骤:
步骤S310.获取当前显示图片在当前图片类型中的排列序号,以及当前图片类型中每一页的图片数量。
当前显示图片在当前图片类型中的排列序号,指的就是当前显示图片是当前图片类型中的第几张(从0开始,以i表示)。
在将每一类型中的所有图片划分为若干页时,可以根据当前图片类型中每一页的预设图片数量进行划分,例如,可以定义每页图片数量为k(假设k>=3)。
当图片从图片列表进入图片展示画廊时,首先获取当前图片是所有图片类型中的第几个分类(从0开始,以I表示),以及当前图片是当前图片类型中的第几张图片(i)。其中,所有图片分类的个数(以L表示),以及每个分类的图片总张数(以t表示,假设t均大于0)可以从数据接口获取。
步骤S320.根据当前显示图片在当前图片类型中的排列序号,以及每一页的图片数量,确定当前显示图片在当前图片类型中的页码,以及当前显示图片在当前页码中的排列序号。
当前显示图片在当前图片类型中的页码,可以通过当前显示图片在当前图片类型中的排列序号,以及每一页的图片数量计算得到。具体而言,先获取当前显示图片在当前图片类型中的排列序号i,以及当前分类中的每页图片数量k,再通过公式(i/k)(向下取整)+1进行计算,即可得到当前显示图片在当前图片类型中的页码p(下标从1开始)。通过公式i%k取余数,即可得到当前显示图片在当前页码中的排列序号q(下标从0开始)。
另外,还可以通过获取每个分类的图片总张数t,计算当前分类的图片总页数P(下标从1开始),具体可以分为一下2种情况:
1)t/k余数为0,则P=t/k;
2)t/k余数不为0,则P=t/k+1。
步骤S330.将当前显示图片在当前图片类型中的页码,以及当前显示图片在当前页码中的排列序号,作为当前显示图片在当前图片类型中的索引序号。
将上述步骤中得到的当前显示图片在当前图片类型中的页码p,以及当前显示图片在当前页码中的排列序号q,作为当前显示图片在当前图片类型中的索引序号。
在步骤S220中,根据当前图片类型,以及当前显示图片在当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数。
待渲染图片列表指的是用于存放与当前显示图片对应的待显示的图片数据列表。本示例实施方式中,可以将待渲染图片列表的长度设为3,用于存放3个待渲染的图片数据,待渲染图片列表的长度也可以设置为其他长度值,本示例实施方式中不做具体限定,在此处以及后续内容中仅以长度3为例进行详细说明。图片显示参数包括当前显示图片对应的滑动参数和渲染标识参数。其中,滑动参数(以s表示)用于表示当前图片是否能够循环滑动,若s设为false,则表示不能滑动;若s设为true,则表示能滑动。渲染标识参数(以a表示)用于表示当前显示的是待渲染图片列表中哪一个位置的图片数据,例如,待渲染图片列表的长度为3(从0开始,元素标识为0,1,2),则a=0表示当前显示的是待渲染图片列表中的第0张图片。
图4示意性示出了根据本公开的一个具体实施方式的图片的显示方法的系统结构说明图,包括接口层410、数据层420和展示层430,其中,接口层410中包括数据接口,可以用于获取图片数据和图片参数。数据层420中包括当前页图片列表(L0)、上一页图片列表(L1)和下一页图片列表(L2),并使用列表401表示待渲染图片列表。展示层430中,表示了多种情况下的待渲染图片列表以及对应的图片显示参数。下面结合图4,对本示例实施方式中的具体步骤进行详细说明。
本示例实施方式中,如图5所示,根据当前图片类型,以及当前显示图片在当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数,具体可以包括以下几个步骤:
步骤S510.根据当前显示图片在当前图片类型中的索引序号,从对应的图片类型中获取相关页码的图片数据,并将图片数据存入指定的图片数据列表中。
本示例实施方式中,可以定义3个列表,包括当前页图片列表(L0)、上一页图片列表(L1)和下一页图片列表(L2),分别用于存放当前页、上一页、下一页数据。
本示例实施方式中,如图6所示,根据当前显示图片在当前图片类型中的索引序号,从对应的图片类型中获取相关页码的图片数据,并将图片数据存入指定的图片数据列表中,具体可以包括以下几个步骤:
步骤S610.根据当前显示图片在当前图片类型中的页码,获取当前页码中的图片数据,并将当前页码中的图片数据存入当前页图片列表中。
如果当前显示图片的分类为I,在该分类中的页码为p,则通过接口层410中的数据接口获取第I个分类的第p页数据,其中,分页大小为k,并将第p页的整页数据存入当前页图片列表L0中。
步骤S620.在当前显示图片在当前页码中的排列序号为初始排列序号时,获取当前页码对应的上一页码中的图片数据,并将上一页码中的图片数据存入上一页图片列表中。
在当前显示图片在当前页码中的排列序号为初始排列序号时,如果用户向前滑动至上一张图片,则会显示当前页码的前一页中的图片,因此,当排列序号到达初始临界值的排列序号时,需要提前获取前一页的图片数据,放入上一页图片列表中。
若当前显示图片在当前图片类型中的页码为初始页码,则获取当前图片类型对应的上一图片类型中最后一页的图片数据,作为当前页码对应的上一页码中的图片数据。
如果q=0,p=1,I>0,则从数据接口获取第I–1个分类的最后一页图片数据,分页大小为k,并将该页的全部图片数据存入上一页图片列表L1中。
若当前显示图片在当前图片类型中的页码为除初始页码之外的其他页码,则直接从当前图片类型中获取当前页码对应的上一页码中的图片数据。
如果q=0,p>1,分类I任意,则从数据接口获取第I个分类的第p–1页图片数据,分页大小为k,并将该页的全部图片数据存入上一页图片列表L1中。
步骤S630.在当前显示图片在当前页码中的排列序号为末尾排列序号时,获取当前页码对应的下一页码中的图片数据,并将下一页码中的图片数据存入下一页图片列表中。
在当前显示图片在当前页码中的排列序号为末尾排列序号时,如果用户向后滑动至下一张图片,则会显示当前页码的后一页中的图片,因此,需要获取下一页的图片数据,放入下一页图片列表中。
若当前显示图片在当前图片类型中的页码为末尾页码,则获取当前图片类型对应的下一图片类型中第一页的图片数据,作为当前页码对应的下一页码中的图片数据。
如果q=k–1,p=P,I<L,则从数据接口获取第I+1个分类的第1页图片数据,分页大小为k,并将该页的全部图片数据存入下一页图片列表L2中。
若当前显示图片在当前图片类型中的页码为除末尾页码之外的其他页码,则直接从当前图片类型中获取当前页码对应的下一页码中的图片数据。
如果q=k–1,p<P,分类I任意,则从数据接口获取第I个分类的第p+1页图片数据,分页大小为k,并将该页的全部图片数据存入下一页图片列表L2中。
在上述步骤中,还可以将临界值提前,在当前页码中的排列序号还没有到初始排列序号或者末尾排列序号时,就开始请求上一页或下一页数据。例如,当q=k–5时,就请求下一页数据放入下一页图片列表L2中,从而达到预加载提前的效果。
步骤S520.根据当前显示图片在当前图片类型中的索引序号确定图片显示参数,并从图片数据列表中获取当前显示图片对应的待渲染图片,得到待渲染图片列表。
本示例实施方式中,可以将待渲染图片列表的长度定义为3,通过滑动参数s表示当前图片是否可滑动,通过渲染标识参数a表示渲染组件初始化展示下标。在待渲染图片列表中放入待渲染的图片数据,并处理参数s、a的逻辑如下:
在当前显示图片为所有图片类型中的第一个图片类型,并且在第一个图片类型中的页码为初始页码,在初始页码中的排列序号为初始排列序号时,将滑动参数设置为第一滑动参数,将渲染标识参数设置为第一渲染标识参数,并从当前页图片列表中,以当前显示图片对应的初始排列序号为始,向后依次获取与待渲染图片列表长度相同的图片数据作为待渲染图片,其中,第一滑动参数表示当前显示图片不能循环滑动;
在当前显示图片为所有图片类型中的第一个图片类型,并且在第一个图片类型中的页码为初始页码,在初始页码中的排列序号为初始排列序号时,即q=0,p=1,I=0时,则从当前页图片列表L0中的第0张图开始,向后依次获取与待渲染图片列表长度相同的图片数据,即3个图片数据放入待渲染图片列表中,待渲染图片列表的第0个元素放入当前页图片列表L0中的第0张图,第1个元素放入L0中的第1张图,第2个元素放入L0中的第2张图。同时,将滑动参数设置为第一滑动参数,即将s设为false,表示当前图片不可滑动,并且使a=0,表示当前显示的是待渲染图片列表中的第0个元素,如图4中的待渲染图片列表402所示。
在当前显示图片为所有图片类型中的最后一个图片类型,并且在最后一个图片类型中的页码为末尾页码,在末尾页码中的排列序号为末尾排列序号时,将滑动参数设置为第一滑动参数,将渲染标识参数设置为第三渲染标识参数,并从当前页图片列表中,以当前显示图片对应的末尾排列序号为始,向前依次获取与待渲染图片列表长度相同的图片数据作为待渲染图片;
在当前显示图片为所有图片类型中的最后一个图片类型,并且在最后一个图片类型中的页码为末尾页码,在末尾页码中的排列序号为末尾排列序号时,q=k–1,p=P,I=L时,则从当前页图片列表L0中的最后一张图也就是第k–1张图开始,向前依次获取与待渲染图片列表长度相同的图片数据,即3个图片数据放入待渲染图片列表中,待渲染图片列表的第0个元素放入当前页图片列表L0中的第k–3张图,第1个元素放入L0中的第k–2张图,第2个元素放入L0中的第k–1张图。同时,将滑动参数设置为第一滑动参数,即将s设为false,表示当前图片不可滑动,并且使a=2,表示当前显示的是待渲染图片列表中的第2个元素,如图4中的待渲染图片列表403所示。
除上述两种情况以外,则将滑动参数设置为第二滑动参数,将渲染标识参数设置为第二渲染标识参数,并根据排列序号从图片数据列表中获取与待渲染图片列表长度相同的图片数据作为待渲染图片,其中,第二滑动参数表示当前显示图片能够循环滑动。
除了上述两种情况,也就是当前图片为所有图片类型中的第一张图片和最后一张图片以外,对于其他情况来说,图片都是可以滑动的状态,因此,将s设为true,并且使a=1,表示将当前图片放在待渲染图片列表的中间,前后可滑动,分别放入邻近的待渲染图片数据,如图4中的待渲染图片列表404所示。
其中,根据排列序号从图片数据列表中获取与待渲染图片列表长度相同的图片数据作为待渲染图片,具体可以包括:
在当前显示图片在当前页码中的排列序号为初始排列序号时,从当前页图片列表和上一页图片列表中获取与待渲染图片列表长度相同的图片数据作为待渲染图片;
在当前显示图片在当前页码中的排列序号为末尾排列序号时,从当前页图片列表和下一页图片列表中获取与待渲染图片列表长度相同的图片数据作为待渲染图片。
除上述两种情况以外,则直接从当前页图片列表中获取与待渲染图片列表长度相同的图片数据作为待渲染图片。
具体而言,对于其他情况来说,首先,若待渲染图片列表的长度为3,则将待渲染图片列表的第1个元素放入当前页图片列表L0中的第q张图,对于待渲染图片列表的其他元素中放入的图片数据如下:
如果q>0,则将待渲染图片列表的第0个元素放入当前页图片列表L0中的第q–1张图;
如果q=0,则将待渲染图片列表的第0个元素放入上一页图片列表L1中的第k–1张图;
如果q<k–1,则将待渲染图片列表的第2个元素放入当前页图片列表L0中的第q+1张图;
如果q=k–1,则将待渲染图片列表的第2个元素放入下一页图片列表L2中的第0张图。
在步骤S230中,响应作用于当前显示图片上的图片滑动操作,根据图片滑动操作和图片显示参数从待渲染图片列表中确定下一显示图片。
在确定当前的待渲染图片列表以及图片显示参数之后,按照待渲染图片列表、滑动参数s以及渲染标识参数a,根据用户的图片滑动操作确定下一显示图片,在显示图片的过程中,可以采用小程序swiper组件对图片进行渲染和显示。
本示例实施方式中,当作用于当前显示图片上的图片滑动操作为第一滑动操作时,响应作用于当前显示图片上的第一滑动操作,根据当前显示图片的渲染标识参数,从待渲染图片列表中获取当前显示图片的前一待渲染图片,作为下一显示图片。
第一滑动操作指的是向左的滑动操作,如果用户向左滑动图片,则依次显示当前图片的下一张图片,也就是说,每次滑动图片时q的值加1。如果q=k–1,则按照步骤S630请求下一页图片列表L2中的数据。如果q=k,则使用当前页图片列表L0中的数据覆盖上一页图片列表L1,使用下一页图片列表L2中的数据覆盖当前页图片列表L0,并将q重新设置为0。
本示例实施方式中,当作用于当前显示图片上的图片滑动操作为第二滑动操作时,响应作用于当前显示图片上的第二滑动操作,根据当前显示图片的图片显示参数,从待渲染图片列表中获取当前显示图片的后一待渲染图片,作为下一显示图片。
第二滑动操作指的是向右的滑动操作,如果用户向右滑动图片,则依次显示当前图片的前一张图片,也就是说,每次滑动图片时q的值减1。如果q=0,则按照步骤S620请求上一页图片列表L1中的数据。如果q<0,则使用当前页图片列表L0中的数据覆盖下一页图片列表L2,并使用上一页图片列表L1中的数据覆盖当前页图片列表L0,再将q重新设置为k–1。
在步骤S240中,显示下一显示图片,并根据下一显示图片对应的图片类型,以及下一显示图片在图片类型中的索引序号,更新待渲染图片列表和图片显示参数。
在确定下一显示图片之后,通过图片渲染组件对其进行显示,并根据下一显示图片对应的图片类型,以及下一显示图片在图片类型中的索引序号,实时更新待渲染图片列表和图片显示参数,为之后的滑动操作做好准备。
本示例实施方式中,每次向左滑动图片时,待渲染图片列表中渲染标识参数a的值按照1–>2–>0–>1变换,而待渲染图片列表中的元素按照图4中的404–>405–>406–>404变换,当a从1变为2时,处理待渲染图片列表的第0个元素;当a从2变为0时,处理待渲染图片列表的第1个元素;当a从0变为1时,处理待渲染图片列表的第2个元素。如果q<k–1,则将当前页图片列表L0的第q+1个元素放入对应位置;如果q=k–1,则将下一页图片列表L2的0个元素放入对应位置,触发待渲染图片列表的图片变化。
如果按照当前显示图片为第L–1个分类的第t张图片初始化待渲染图片列表,即q=k–1,p=P,I=L的情况,则当前显示图片无法向左滑动,因此本示例实施方式中不存在此场景。
如果滑动后达到q=k–1,p=P,I=L的情况,则按照图4中待渲染图片列表403的情况填充待渲染图片列表,将s设为false,a设为2,触发待渲染图片列表的图片变化。
每次向右滑动图片时,待渲染图片列表中渲染标识参数a的值按照1–>0–>2–>1变换,而待渲染图片列表中的元素按照图4中的404–>406–>405–>404变换,当a从1变为0时,处理待渲染图片列表的第2个元素;当a从0变为2时,处理待渲染图片列表的第1个元素;当a从2变为1时,处理待渲染图片列表的第0个元素。如果q>0,则将当前页图片列表L0的第q–1个元素放入对应位置;如果q=0,则将上一页图片列表L1的第k–1个元素放入对应位置,触发待渲染图片列表的图片变化。
如果按照当前显示图片为第0个分类的第0张图片初始化待渲染图片列表,即q=0,p=1,I=0的情况,则当前显示图片无法向右滑动,因此本示例实施方式中不存在此场景。
如果滑动后达到q=0,p=1,I=0的情况,则按照图4中待渲染图片列表402的情况填充待渲染图片列表,s设为false,a设为0,触发待渲染图片列表的图片变化。
应当注意,尽管在附图中以特定顺序描述了本公开中方法的各个步骤,但是,这并非要求或者暗示必须按照该特定顺序来执行这些步骤,或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的,可以省略某些步骤,将多个步骤合并为一个步骤执行,以及/或者将一个步骤分解为多个步骤执行等。
进一步的,本公开还提供了一种图片的显示装置。参考图7所示,该图片的显示装置可以包括图片信息获取模块710、待渲染图片列表确定模块720、图片滑动操作模块730以及待渲染图片列表更新模块740。其中:
图片信息获取模块710可以用于获取当前显示图片的当前图片类型,并获取所述当前显示图片在所述当前图片类型中的索引序号;
待渲染图片列表确定模块720可以用于根据所述当前图片类型,以及所述当前显示图片在所述当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数;
图片滑动操作模块730可以用于响应作用于所述当前显示图片上的图片滑动操作,根据所述图片滑动操作和所述图片显示参数从所述待渲染图片列表中确定下一显示图片;
待渲染图片列表更新模块740可以用于显示所述下一显示图片,并根据所述下一显示图片对应的图片类型,以及所述下一显示图片在所述图片类型中的索引序号,更新所述待渲染图片列表和所述图片显示参数。
在本公开的一些示例性实施例中,图片信息获取模块710可以包括基本信息获取单元、图片参数确定单元以及索引序号确定单元。其中:
基本信息获取单元可以用于获取所述当前显示图片在所述当前图片类型中的排列序号,以及所述当前图片类型中每一页的图片数量;
图片参数确定单元可以用于根据所述当前显示图片在所述当前图片类型中的排列序号,以及所述每一页的图片数量,确定所述当前显示图片在所述当前图片类型中的页码,以及所述当前显示图片在当前页码中的排列序号;
索引序号确定单元可以用于将所述当前显示图片在所述当前图片类型中的页码,以及所述当前显示图片在当前页码中的排列序号,作为所述当前显示图片在所述当前图片类型中的索引序号。
在本公开的一些示例性实施例中,待渲染图片列表确定模块720可以包括图片列表确定单元以及待渲染图片列表确定单元。其中:
图片列表确定单元可以用于根据所述当前显示图片在所述当前图片类型中的索引序号,从对应的图片类型中获取相关页码的图片数据,并将所述图片数据存入指定的图片数据列表中;
待渲染图片列表确定单元可以用于根据所述当前显示图片在所述当前图片类型中的索引序号确定所述图片显示参数,并从所述图片数据列表中获取所述当前显示图片对应的待渲染图片,得到待渲染图片列表。
在本公开的一些示例性实施例中,图片列表确定单元可以包括当前页图片列表确定单元、上一页图片列表确定单元以及下一页图片列表确定单元。其中:
当前页图片列表确定单元可以用于根据所述当前显示图片在所述当前图片类型中的页码,获取当前页码中的图片数据,并将所述当前页码中的图片数据存入当前页图片列表中;
上一页图片列表确定单元可以用于当所述当前显示图片在当前页码中的排列序号为初始排列序号时,获取所述当前页码对应的上一页码中的图片数据,并将所述上一页码中的图片数据存入上一页图片列表中;
下一页图片列表确定单元可以用于当所述当前显示图片在当前页码中的排列序号为末尾排列序号时,获取所述当前页码对应的下一页码中的图片数据,并将所述下一页码中的图片数据存入下一页图片列表中。
在本公开的一些示例性实施例中,上一页图片列表确定单元可以包括上一图片类型获取单元以及当前图片类型获取单元。其中:
上一图片类型获取单元可以用于若所述当前显示图片在所述当前图片类型中的页码为初始页码,则获取所述当前图片类型对应的上一图片类型中最后一页的图片数据,作为所述当前页码对应的上一页码中的图片数据;
当前图片类型获取单元可以用于若所述当前显示图片在所述当前图片类型中的页码为除所述初始页码之外的其他页码,则直接从所述当前图片类型中获取所述当前页码对应的上一页码中的图片数据。
在本公开的一些示例性实施例中,下一页图片列表确定单元可以包括下一图片类型获取单元以及当前图片类型获取单元。其中:
下一图片类型获取单元可以用于若所述当前显示图片在所述当前图片类型中的页码为末尾页码,则获取所述当前图片类型对应的下一图片类型中第一页的图片数据,作为所述当前页码对应的下一页码中的图片数据;
当前图片类型获取单元可以用于若所述当前显示图片在所述当前图片类型中的页码为除所述末尾页码之外的其他页码,则直接从所述当前图片类型中获取所述当前页码对应的下一页码中的图片数据。
在本公开的一些示例性实施例中,待渲染图片列表确定单元可以包括第一待渲染图片列表确定单元、第二待渲染图片列表确定单元以及第三待渲染图片列表确定单元。其中:
第一待渲染图片列表确定单元可以用于当所述当前显示图片为所有图片类型中的第一个图片类型,并且在所述第一个图片类型中的页码为初始页码,在所述初始页码中的排列序号为初始排列序号时,将所述滑动参数设置为第一滑动参数,将所述渲染标识参数设置为第一渲染标识参数,并从所述当前页图片列表中,以所述当前显示图片对应的初始排列序号为始,向后依次获取与所述待渲染图片列表长度相同的图片数据作为待渲染图片,其中,所述第一滑动参数表示所述当前显示图片不能循环滑动;
第二待渲染图片列表确定单元可以用于当所述当前显示图片为所有图片类型中的最后一个图片类型,并且在所述最后一个图片类型中的页码为末尾页码,在所述末尾页码中的排列序号为末尾排列序号时,将所述滑动参数设置为第一滑动参数,将所述渲染标识参数设置为第三渲染标识参数,并从所述当前页图片列表中,以所述当前显示图片对应的末尾排列序号为始,向前依次获取与所述待渲染图片列表长度相同的图片数据作为待渲染图片;
第三待渲染图片列表确定单元可以用于除上述两种情况以外,则将所述滑动参数设置为第二滑动参数,将所述渲染标识参数设置为第二渲染标识参数,并根据所述排列序号从所述图片数据列表中获取与所述待渲染图片列表长度相同的图片数据作为待渲染图片,其中,所述第二滑动参数表示所述当前显示图片能够循环滑动。
在本公开的一些示例性实施例中,第三待渲染图片列表确定单元可以包括第一待渲染图片确定单元、第二待渲染图片确定单元以及第三待渲染图片确定单元。其中:
第一待渲染图片确定单元可以用于当所述当前显示图片在当前页码中的排列序号为初始排列序号时,从所述当前页图片列表和所述上一页图片列表中获取所述与所述待渲染图片列表长度相同的图片数据作为待渲染图片;
第二待渲染图片确定单元可以用于当所述当前显示图片在当前页码中的排列序号为末尾排列序号时,从所述当前页图片列表和所述下一页图片列表中获取所述与所述待渲染图片列表长度相同的图片数据作为待渲染图片;
第三待渲染图片确定单元可以用于除上述两种情况以外,则直接从所述当前页图片列表中获取所述与所述待渲染图片列表长度相同的图片数据作为待渲染图片。
在本公开的一些示例性实施例中,图片滑动操作模块730可以包括第一滑动操作单元以及第二滑动操作单元。其中:
第一滑动操作单元可以用于当作用于所述当前显示图片上的图片滑动操作为第一滑动操作时,响应作用于所述当前显示图片上的第一滑动操作,根据所述当前显示图片的渲染标识参数,从所述待渲染图片列表中获取所述当前显示图片的前一待渲染图片,作为下一显示图片;
第二滑动操作单元可以用于当作用于所述当前显示图片上的图片滑动操作为第二滑动操作时,响应作用于所述当前显示图片上的第二滑动操作,根据所述当前显示图片的图片显示参数,从所述待渲染图片列表中获取所述当前显示图片的后一待渲染图片,作为下一显示图片。
上述图片的显示装置中各模块/单元的具体细节在相应的方法实施例部分已有详细的说明,此处不再赘述。
图8示出了适于用来实现本发明实施例的电子设备的计算机系统的结构示意图。
需要说明的是,图8示出的电子设备的计算机系统800仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。
如图8所示,计算机系统800包括中央处理单元(CPU)801,其可以根据存储在只读存储器(ROM)802中的程序或者从存储部分808加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。在RAM 803中,还存储有系统操作所需的各种程序和数据。CPU801、ROM 802以及RAM 803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。
以下部件连接至I/O接口805:包括键盘、鼠标等的输入部分806;包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分807;包括硬盘等的存储部分808;以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811,诸如磁盘、光盘、磁光盘、半导体存储器等等,根据需要安装在驱动器810上,以便于从其上读出的计算机程序根据需要被安装入存储部分808。
特别地,根据本发明的实施例,下文参考流程图描述的过程可以被实现为计算机软件程序。例如,本发明的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信部分809从网络上被下载和安装,和/或从可拆卸介质811被安装。在该计算机程序被中央处理单元(CPU)801执行时,执行本申请的系统中限定的各种功能。
需要说明的是,本公开所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD–ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中,计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:无线、电线、光缆、RF等等,或者上述的任意合适的组合。
附图中的流程图和框图,图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图或流程图中的每个方框、以及框图或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
作为另一方面,本申请还提供了一种计算机可读介质,该计算机可读介质可以是上述实施例中描述的电子设备中所包含的;也可以是单独存在,而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被一个该电子设备执行时,使得该电子设备实现如下述实施例中所述的方法。
应当注意,尽管在上文详细描述中提及了用于动作执行的设备的若干模块,但是这种划分并非强制性的。实际上,根据本公开的实施方式,上文描述的两个或更多模块的特征和功能可以在一个模块中具体化。反之,上文描述的一个模块的特征和功能可以进一步划分为由多个模块来具体化。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。
应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。
Claims (12)
1.一种图片的显示方法,其特征在于,包括:
获取当前显示图片的当前图片类型,并获取所述当前显示图片在所述当前图片类型中的索引序号;
根据所述当前图片类型,以及所述当前显示图片在所述当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数;
响应作用于所述当前显示图片上的图片滑动操作,根据所述图片滑动操作和所述图片显示参数从所述待渲染图片列表中确定下一显示图片;
显示所述下一显示图片,并根据所述下一显示图片对应的图片类型,以及所述下一显示图片在所述图片类型中的索引序号,更新所述待渲染图片列表和所述图片显示参数。
2.根据权利要求1所述的图片的显示方法,其特征在于,所述获取所述当前显示图片在所述当前图片类型中的索引序号,包括:
获取所述当前显示图片在所述当前图片类型中的排列序号,以及所述当前图片类型中每一页的图片数量;
根据所述当前显示图片在所述当前图片类型中的排列序号,以及所述每一页的图片数量,确定所述当前显示图片在所述当前图片类型中的页码,以及所述当前显示图片在当前页码中的排列序号;
将所述当前显示图片在所述当前图片类型中的页码,以及所述当前显示图片在当前页码中的排列序号,作为所述当前显示图片在所述当前图片类型中的索引序号。
3.根据权利要求1所述的图片的显示方法,其特征在于,所述根据所述当前图片类型,以及所述当前显示图片在所述当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数,包括:
根据所述当前显示图片在所述当前图片类型中的索引序号,从对应的图片类型中获取相关页码的图片数据,并将所述图片数据存入指定的图片数据列表中;
根据所述当前显示图片在所述当前图片类型中的索引序号确定所述图片显示参数,并从所述图片数据列表中获取所述当前显示图片对应的待渲染图片,得到待渲染图片列表。
4.根据权利要求3所述的图片的显示方法,其特征在于,所述根据所述当前显示图片在所述当前图片类型中的索引序号,从对应的图片类型中获取相关页码的图片数据,并将所述图片数据存入指定的图片数据列表中,包括:
根据所述当前显示图片在所述当前图片类型中的页码,获取当前页码中的图片数据,并将所述当前页码中的图片数据存入当前页图片列表中;
当所述当前显示图片在当前页码中的排列序号为初始排列序号时,获取所述当前页码对应的上一页码中的图片数据,并将所述上一页码中的图片数据存入上一页图片列表中;
当所述当前显示图片在当前页码中的排列序号为末尾排列序号时,获取所述当前页码对应的下一页码中的图片数据,并将所述下一页码中的图片数据存入下一页图片列表中。
5.根据权利要求4所述的图片的显示方法,其特征在于,所述获取所述当前页码对应的上一页码中的图片数据,包括:
若所述当前显示图片在所述当前图片类型中的页码为初始页码,则获取所述当前图片类型对应的上一图片类型中最后一页的图片数据,作为所述当前页码对应的上一页码中的图片数据;
若所述当前显示图片在所述当前图片类型中的页码为除所述初始页码之外的其他页码,则直接从所述当前图片类型中获取所述当前页码对应的上一页码中的图片数据。
6.根据权利要求4所述的图片的显示方法,其特征在于,所述获取所述当前页码对应的下一页码中的图片数据,包括:
若所述当前显示图片在所述当前图片类型中的页码为末尾页码,则获取所述当前图片类型对应的下一图片类型中第一页的图片数据,作为所述当前页码对应的下一页码中的图片数据;
若所述当前显示图片在所述当前图片类型中的页码为除所述末尾页码之外的其他页码,则直接从所述当前图片类型中获取所述当前页码对应的下一页码中的图片数据。
7.根据权利要求4所述的图片的显示方法,其特征在于,所述图片显示参数包括所述当前显示图片对应的滑动参数和渲染标识参数,所述根据所述当前显示图片在所述当前图片类型中的索引序号确定所述图片显示参数,并从所述图片数据列表中获取所述当前显示图片对应的待渲染图片,得到待渲染图片列表,包括:
在所述当前显示图片为所有图片类型中的第一个图片类型,并且在所述第一个图片类型中的页码为初始页码,在所述初始页码中的排列序号为初始排列序号时,将所述滑动参数设置为第一滑动参数,将所述渲染标识参数设置为第一渲染标识参数,并从所述当前页图片列表中,以所述当前显示图片对应的初始排列序号为始,向后依次获取与所述待渲染图片列表长度相同的图片数据作为待渲染图片,其中,所述第一滑动参数表示所述当前显示图片不能循环滑动;
在所述当前显示图片为所有图片类型中的最后一个图片类型,并且在所述最后一个图片类型中的页码为末尾页码,在所述末尾页码中的排列序号为末尾排列序号时,将所述滑动参数设置为第一滑动参数,将所述渲染标识参数设置为第三渲染标识参数,并从所述当前页图片列表中,以所述当前显示图片对应的末尾排列序号为始,向前依次获取与所述待渲染图片列表长度相同的图片数据作为待渲染图片;
除上述两种情况以外,则将所述滑动参数设置为第二滑动参数,将所述渲染标识参数设置为第二渲染标识参数,并根据所述排列序号从所述图片数据列表中获取与所述待渲染图片列表长度相同的图片数据作为待渲染图片,其中,所述第二滑动参数表示所述当前显示图片能够循环滑动。
8.根据权利要求7所述的图片的显示方法,其特征在于,所述根据所述排列序号从所述图片数据列表中获取与所述待渲染图片列表长度相同的图片数据作为待渲染图片,包括:
在所述当前显示图片在当前页码中的排列序号为初始排列序号时,从所述当前页图片列表和所述上一页图片列表中获取所述与所述待渲染图片列表长度相同的图片数据作为待渲染图片;
在所述当前显示图片在当前页码中的排列序号为末尾排列序号时,从所述当前页图片列表和所述下一页图片列表中获取所述与所述待渲染图片列表长度相同的图片数据作为待渲染图片;
除上述两种情况以外,则直接从所述当前页图片列表中获取所述与所述待渲染图片列表长度相同的图片数据作为待渲染图片。
9.根据权利要求8所述的图片的显示方法,其特征在于,所述响应作用于所述当前显示图片上的图片滑动操作,根据所述图片滑动操作和所述图片显示参数从所述待渲染图片列表中确定下一显示图片,包括:
当作用于所述当前显示图片上的图片滑动操作为第一滑动操作时,响应作用于所述当前显示图片上的第一滑动操作,根据所述当前显示图片的渲染标识参数,从所述待渲染图片列表中获取所述当前显示图片的前一待渲染图片,作为下一显示图片;
当作用于所述当前显示图片上的图片滑动操作为第二滑动操作时,响应作用于所述当前显示图片上的第二滑动操作,根据所述当前显示图片的图片显示参数,从所述待渲染图片列表中获取所述当前显示图片的后一待渲染图片,作为下一显示图片。
10.一种图片的显示装置,其特征在于,包括:
图片信息获取模块,用于获取当前显示图片的当前图片类型,并获取所述当前显示图片在所述当前图片类型中的索引序号;
待渲染图片列表确定模块,用于根据所述当前图片类型,以及所述当前显示图片在所述当前图片类型中的索引序号,确定当前的待渲染图片列表和图片显示参数;
图片滑动操作模块,用于响应作用于所述当前显示图片上的图片滑动操作,根据所述图片滑动操作和所述图片显示参数从所述待渲染图片列表中确定下一显示图片;
待渲染图片列表更新模块,用于显示所述下一显示图片,并根据所述下一显示图片对应的图片类型,以及所述下一显示图片在所述图片类型中的索引序号,更新所述待渲染图片列表和所述图片显示参数。
11.一种电子设备,其特征在于,包括:
处理器;以及
存储器,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行时,使得所述一个或多个处理器实现如权利要求1至9中任一项所述的图片的显示方法。
12.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如权利要求1至9中任一项所述的图片的显示方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011400291.5A CN113791716A (zh) | 2020-12-02 | 2020-12-02 | 图片的显示方法、装置、电子设备及计算机可读介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011400291.5A CN113791716A (zh) | 2020-12-02 | 2020-12-02 | 图片的显示方法、装置、电子设备及计算机可读介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN113791716A true CN113791716A (zh) | 2021-12-14 |
Family
ID=79181098
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011400291.5A Pending CN113791716A (zh) | 2020-12-02 | 2020-12-02 | 图片的显示方法、装置、电子设备及计算机可读介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113791716A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115484487A (zh) * | 2022-08-23 | 2022-12-16 | 北京奇艺世纪科技有限公司 | 一种视频播放方法、装置、电子设备及存储介质 |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103870102A (zh) * | 2012-12-13 | 2014-06-18 | 腾讯科技(武汉)有限公司 | 图片切换方法及装置 |
CN104111813A (zh) * | 2014-06-23 | 2014-10-22 | 小米科技有限责任公司 | 图片同步显示方法、装置、移动终端及终端设备 |
WO2018176960A1 (zh) * | 2017-03-27 | 2018-10-04 | 广州优视网络科技有限公司 | 显示网络图片的方法、装置以及用户终端 |
CN110647285A (zh) * | 2019-09-23 | 2020-01-03 | 海南车智易通信息技术有限公司 | 一种图片的显示方法、图片显示装置及移动终端 |
CN110765382A (zh) * | 2019-10-14 | 2020-02-07 | 腾讯科技(深圳)有限公司 | 图片读物加载方法、装置、存储介质和计算机设备 |
-
2020
- 2020-12-02 CN CN202011400291.5A patent/CN113791716A/zh active Pending
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103870102A (zh) * | 2012-12-13 | 2014-06-18 | 腾讯科技(武汉)有限公司 | 图片切换方法及装置 |
CN104111813A (zh) * | 2014-06-23 | 2014-10-22 | 小米科技有限责任公司 | 图片同步显示方法、装置、移动终端及终端设备 |
WO2018176960A1 (zh) * | 2017-03-27 | 2018-10-04 | 广州优视网络科技有限公司 | 显示网络图片的方法、装置以及用户终端 |
CN110647285A (zh) * | 2019-09-23 | 2020-01-03 | 海南车智易通信息技术有限公司 | 一种图片的显示方法、图片显示装置及移动终端 |
CN110765382A (zh) * | 2019-10-14 | 2020-02-07 | 腾讯科技(深圳)有限公司 | 图片读物加载方法、装置、存储介质和计算机设备 |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115484487A (zh) * | 2022-08-23 | 2022-12-16 | 北京奇艺世纪科技有限公司 | 一种视频播放方法、装置、电子设备及存储介质 |
CN115484487B (zh) * | 2022-08-23 | 2023-12-05 | 北京奇艺世纪科技有限公司 | 一种视频播放方法、装置、电子设备及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112135059B (zh) | 拍摄方法、装置、电子设备和存储介质 | |
CN109388317B (zh) | 一种图片加载方法、终端设备及存储介质 | |
CN110633434B (zh) | 一种页面缓存方法、装置、电子设备及存储介质 | |
CN113535032A (zh) | 一种信息显示方法、装置、电子设备和存储介质 | |
CN109815424A (zh) | 网页图片显示方法及终端设备 | |
CN110211017A (zh) | 图像处理方法、装置及电子设备 | |
CN112486611A (zh) | 页面切换显示方法、装置、存储介质及电子设备 | |
CN113791716A (zh) | 图片的显示方法、装置、电子设备及计算机可读介质 | |
CN110858154B (zh) | 一种轮播图的切换显示方法、装置、电子设备及存储介质 | |
CN113589926B (zh) | 虚拟界面操作方法、头戴式显示设备和计算机可读介质 | |
CN111597009B (zh) | 应用程序显示的方法、装置及终端设备 | |
CN111061532B (zh) | 一种壁纸展示方法及终端设备 | |
CN109672931B (zh) | 用于处理视频帧的方法和装置 | |
CN108415656B (zh) | 虚拟场景中的显示控制方法、装置、介质及电子设备 | |
CN110597432A (zh) | 界面控制方法、装置、计算机可读介质及电子设备 | |
CN111599449B (zh) | 电子图像的自动播放方法、装置、设备及存储介质 | |
CN111770385A (zh) | 一种卡片显示方法、装置、电子设备及介质 | |
CN115460448A (zh) | 一种媒体资源编辑方法、装置、电子设备以及存储介质 | |
CN114742013A (zh) | 在线文档展示方法、装置和电子设备 | |
CN103500189A (zh) | 图片浏览方法与装置 | |
CN112417276A (zh) | 分页数据获取方法、装置、电子设备及计算机可读存储介质 | |
CN110990095A (zh) | 寄宿应用展示方法、设备以及计算机可读介质 | |
CN110968783A (zh) | 内容信息推荐的方法和装置 | |
CN112883210B (zh) | 一种多媒体数据的筛选方法、装置、智能终端及存储介质 | |
CN111782113B (zh) | 显示方法、装置和计算机可读存储介质 |
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 |