CN110825477A - 图形界面的加载方法、装置、设备及存储介质 - Google Patents

Abstract

本发明公开了一种图形界面的加载方法、装置、设备及存储介质，该方法包括：根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定目标显示状态对应的目标图片，在目标区域中显示目标图片，通过用多张图片对应UI组件渲染后的显示状态，一方面，将图形界面加载过程中加载UI组件并渲染的过程替换为加载相应显示状态的图片并显示的过程，从而，减轻了图形界面加载所需的***开销，另一方面，由于图片是一种不可变资源，可以“一次加载，多处显示”，当图形界面包含多个相同UI组件，且目标显示状态相同时，相同图片在整个***中加载一次即可，不需要加载多个UI组件，从而，避免了图形界面加载过程中的卡顿现象。

Description

图形界面的加载方法、装置、设备及存储介质

技术领域

本发明实施例涉及计算机技术领域，尤其涉及一种图形界面的加载方法、装置、设备及存储介质。

背景技术

由于功能需要，可能需要多个用户界面(User Interface，UI)组件实现一个图形界面的显示。

目前，图形界面的加载过程为：加载UI组件，并将UI组件渲染成其对应状态。

但是，上述过程中，一方面，UI组件的渲染过程需要的***开销较大，另一方面，加载多个UI组件导致图形界面的加载时间过长，会出现卡顿现象。

发明内容

本发明提供一种图形界面的加载方法、装置、设备及存储介质，以解决目前的图形界面的加载方法***开销大及存在卡顿现象的技术问题。

第一方面，本发明实施例提供一种图形界面的加载方法，包括：

根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片；

在目标区域中显示所述目标图片。

如上所示的方法中，所述在目标区域中显示所述目标图片之后，所述方法还包括：

在接收到触发显示状态转换的目标事件时，根据当前显示状态、事件以及转换后显示状态的第二映射关系，以及所述目标显示状态及所述目标事件，确定与目标显示状态及所述目标事件对应的转换后目标显示状态；

根据所述第一映射关系以及所述转换后目标显示状态，确定所述转换后目标显示状态对应的转换后目标图片；

在所述目标区域中显示所述转换后目标图片。

如上所示的方法中，所述第一映射关系为显示状态的标识值与图片的映射关系；

相应地，根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片，包括：

将所述第一映射关系中，所述目标显示状态的标识值对应的图片确定为所述目标图片。

如上所示的方法中，根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片之前，所述方法还包括：

若确定能从预设存储空间中获取到所述目标图片，则显示所述目标图片；

若确定不能从所述预设存储空间中获取到所述目标图片，则确定执行根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片的步骤。

如上所示的方法中，所述在目标区域中显示所述目标图片，包括：

当所述目标区域为多个区域时，在多个所述目标区域均显示所述目标图片。

如上所示的方法中，根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片之前，所述方法还包括：

生成所述UI组件的所有显示状态；

为每个所述显示状态生成对应的图片；

建立所述显示状态与图片的第一映射关系；

建立当前显示状态、事件以及转换后显示状态的第二映射关系。

如上所示的方法中，所述目标事件包括用户操作引起的事件。

第二方面，本发明实施例提供一种图形界面的加载装置，包括：

第一确定模块，用于根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片；

第一显示模块，用于在目标区域中显示所述目标图片。

第三方面，本发明实施例还提供了一种计算机设备，所述计算机设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如第一方面提供的图形界面的加载方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面提供的图形界面的加载方法。

本实施例提供一种图形界面的加载方法、装置、设备及存储介质，该方法包括：根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定目标显示状态对应的目标图片，在目标区域中显示目标图片，通过用多张图片对应UI组件渲染后的显示状态，一方面，将图形界面加载过程中加载UI组件并渲染的过程替换为加载相应显示状态的图片并显示的过程，从而，减轻了图形界面加载所需的***开销，另一方面，由于图片是一种不可变资源，可以“一次加载，多处显示”，当图形界面包含多个相同UI组件，且目标显示状态相同时，相同图片在整个***中加载一次即可，不需要加载多个UI组件，从而，避免了图形界面加载过程中的卡顿现象。

附图说明

图1为本发明提供的图形界面的加载方法实施例一的流程示意图；

图2为本发明提供的图形界面的加载方法实施例二的流程示意图；

图3A为图2所示实施例中一种图形界面的示意图；

图3B为图2所示实施例中第一映射关系的示意图；

图3C为图2所示实施例中第二映射关系的示意图；

图4为本发明提供的图形界面的加载装置实施例一的结构示意图；

图5为本发明提供的图形界面的加载装置实施例二的结构示意图；

图6为本发明提供的计算机设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

图1为本发明提供的图形界面的加载方法实施例一的流程示意图。本实施例适用于加载图形界面的场景。本实施例可以由图形界面的加载装置来执行，该图形界面的加载装置可以由软件和/或硬件的方式实现，该图形界面的加载装置可以集成于计算机设备中。如图1所示，本实施例提供的图形界面的加载方法包括如下步骤：

步骤101：根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定目标显示状态对应的目标图片。

具体地，本实施例中，可以预先建立UI组件的显示状态与图片的第一映射关系。

一种建立第一映射关系的过程可以为：生成UI组件的所有显示状态，为每个显示状态生成对应的图片，建立显示状态与图片的第一映射关系。

为了实现方便，可以用一组变量值标识每个显示状态，相应地，生成的第一映射关系为显示状态的标识值与图片的映射关系。基于该第一映射关系的实现方式，确定目标显示状态对应的目标图片的过程可以为：将第一映射关系中，目标显示状态的标识值对应的图片确定为目标图片。

可选地，本实施例中目标显示状态指的是待显示的状态。

一种实现方式中，可以根据具体的业务功能需求及程序的运行情况确定UI组件的目标显示状态。

另一种实现方式中，可以根据用户的操作确定UI组件的目标显示状态。

再一种实现方式中，可以根据其他设备的指示确定UI组件的目标显示状态。

步骤102：在目标区域中显示目标图片。

具体地，在确定出目标图片之后，在目标区域中显示该目标图片。

可选地，目标区域为UI组件中定义的区域，其根据具体业务功能的不同而不同。

其中，显示目标图片的过程可以为：加载目标图片后在目标区域中显示该目标图片。

当目标图片为单张图片时，可以在加载完该目标图片后，在目标区域中显示该目标图片。当目标图片为多张图片时，可以每加载完一张目标图片后，在目标区域中显示该目标图片，显示该目标图片的同时，可以继续加载其他的目标图片。换句话说，对于单张图片来说，加载完该图片后进行显示，对于多张图片来说，可以在加载其他图片的过程中显示已加载完的图片。

当目标区域为多个区域时，在该多个目标区域中均显示该目标图片。即，当要加载的图形界面包括多个相同的UI组件且目标显示状态相同时，不需要依次加载UI组件，而只需要加载一次目标图片，在多个目标区域进行显示即可，从而，避免了图形界面加载过程中的卡顿现象。

本实施例中，用多张图片对应UI组件渲染后的显示状态，一方面，将图形界面加载过程中加载UI组件并渲染的过程替换为加载相应显示状态的图片并显示的过程，从而，减轻了图形界面加载所需的***开销，另一方面，由于图片是一种不可变资源，可以“一次加载，多处显示”，当图形界面包含多个相同UI组件，且目标显示状态相同时，相同图片在整个***中加载一次即可，不需要加载多个UI组件，从而，避免了图形界面加载过程中的卡顿现象。

一种实现方式中，为了提高图形界面加载的效率，本实施例在步骤101之前，还可以确定能否从预设存储空间中获取到目标显示状态对应的目标图片；当确定能从预设存储空间中获取到目标图片，则显示该目标图片；若确定不能从预设存储空间中获取到目标图片，则确定执行根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定目标显示状态对应的目标图片的步骤。预设存储空间可以为缓存空间。

在上述实现方式中，可以将最近使用过的目标图片存储在预设存储空间中，例如缓存中。在步骤101之前，可以先尝试从该预设存储空间中获取目标图片，如果能获取到该目标图片，则直接进行显示；如果获取不到该目标图片，则确定执行步骤101及步骤102。该实现方式在能从预设存储空间获取到目标图片的场景中，节省确定目标图片的过程，从而，提高了图形界面加载的效率。

本实施例提供的图形界面的加载方法，包括：根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定目标显示状态对应的目标图片，在目标区域中显示目标图片，通过用多张图片对应UI组件渲染后的显示状态，一方面，将图形界面加载过程中加载UI组件并渲染的过程替换为加载相应显示状态的图片并显示的过程，从而，减轻了图形界面加载所需的***开销，另一方面，由于图片是一种不可变资源，可以“一次加载，多处显示”，当图形界面包含多个相同UI组件，且目标显示状态相同时，相同图片在整个***中加载一次即可，不需要加载多个UI组件，从而，避免了图形界面加载过程中的卡顿现象。

图2为本发明提供的图形界面的加载方法实施例二的流程示意图。本实施例在图1所示实施例的基础上，对图形界面加载过程中显示状态转换过程的实现方式作一详细说明。如图2所示，本实施例提供的图形界面的加载方法包括：

步骤201：根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定目标显示状态对应的目标图片。

步骤202：在目标区域中显示目标图片。

步骤201与步骤101、步骤202与步骤102的实现过程和技术原理类似，此处不再赘述。

步骤203：在接收到触发显示状态转换的目标事件时，根据当前显示状态、事件以及转换后显示状态的第二映射关系，以及目标显示状态及目标事件，确定与目标显示状态及目标事件对应的转换后目标显示状态。

具体地，本实施例中的目标事件可以包括用户操作引起的事件。这里的用户操作可以包括：鼠标点击或者滑动等。目标事件还可以包括UI组件中预先定义的事件。

本实施例中，需要预先建立当前显示状态、事件以及转换后显示状态的第二映射关系。第二映射关系为三种变量对应的映射关系，即，转换后显示状态依赖于当前显示状态及事件这两种变量。换句话说，当事件相同，而当前显示状态不同时，转换后显示状态也不同。

基于目标显示状态及目标事件，以及第二映射关系，可以确定出与目标显示状态及目标事件对应的转换后目标显示状态。

步骤204：根据第一映射关系以及转换后目标显示状态，确定转换后目标显示状态对应的转换后目标图片。

步骤205：在目标区域中显示转换后目标图片。

具体地，在确定出转换后目标显示状态后，可以根据第一映射关系以及该转换后显示状态，确定该转换后显示状态对应的转换后目标图片。

第二映射关系具体可以为当前显示状态的标识值、事件的标识值以及转换后显示状态的标识值的映射关系。第一映射关系可以为显示状态的标识值与图片的映射关系。基于此，可以根据目标显示状态的标识值以及目标事件的标识值，从第二映射关系中查找对应的转换后目标显示状态的标识值。之后，将第一映射关系中，转换后目标显示状态的标识值对应的图片确定为转换后目标图片。

需要说明的是，在确定出转换后目标显示状态之后，可以确定能否从预设存储空间中获取到转换后目标图片；若确定能从预设存储空间中获取到转换后目标图片，则在目标区域中显示该转换后目标图片；若确定不能从预设存储空间中获取到转换后目标图片，则确定执行步骤204及步骤205。

以下以一个具体的例子说明上述过程。

图3A为图2所示实施例中一种图形界面的示意图。如图3A所示，其为创建数据库表的对话框，中间的表格31是添加数据库表对应的列信息。以表格31中的勾选框UI组件为例进行说明。如果数据库表的列很多且每一列的勾选状态不一，该图形界面的加载就会出现卡顿。基于本实施例提供的图形界面的加载方法，建立第一映射关系及第二映射关系。

图3B为图2所示实施例中第一映射关系的示意图。如图3B所示，该勾选框UI组件有两种显示状态，将显示状态的标识值定义为1和2，对应的图片如图3B所示。

图3C为图2所示实施例中第二映射关系的示意图。如图3C所示，a图为当前显示状态的标识值、事件以及转换后显示状态的标识值的映射关系。为了便于直观理解第二映射关系，b图中的第二映射关系中添加了显示状态对应的图片。

在加载该创建数据库表的对话框时，基于目标显示状态“勾选”或者“不勾选”以及第一映射关系，确定对应的目标图片，之后在表格31勾选框所在的目标区域中显示该目标图片。由于勾选框有很多个，则目标区域也对应有多个，在多个目标区域中均显示该目标图片，避免了加载多个勾选框UI组件而造成的卡顿现象。用户在勾选框上点击鼠标后，显示状态发生转换。基于第二映射关系、当前显示状态及该点击事件，确定转换后目标显示状态，再基于第一映射关系以及该转换后目标显示状态，确定转换后目标图片，并在目标区域进行显示。

本实施例提供的图形界面的加载方法，通过在接收到触发显示状态转换的目标事件时，根据当前显示状态、事件以及转换后显示状态的第二映射关系，以及目标显示状态及目标事件，确定与目标显示状态及目标事件对应的转换后目标显示状态，根据第一映射关系以及转换后目标显示状态，确定转换后目标显示状态对应的转换后目标图片，在目标区域中显示转换后目标图片，实现了在显示状态发生转换时，先根据第二映射关系、目标显示状态及目标事件，确定出目标显示状态，再根据第一映射关系以及转换后目标显示状态，确定转换后目标图片并显示，避免了在发生显示状态转换时，再次渲染UI组件，从而，进一步减轻了图形界面加载所需的***开销以及避免了图形界面加载过程中的卡顿现象。

图4为本发明提供的图形界面的加载装置实施例一的结构示意图。如图4所示，本实施例提供的图形界面的加载装置包括：第一确定模块41以及第一显示模块42。

第一确定模块41，用于根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定目标显示状态对应的目标图片。

可选地，第一映射关系为显示状态的标识值与图片的映射关系。相应地，第一确定模块41具体用于：将第一映射关系中，目标显示状态的标识值对应的图片确定为目标图片。

第一显示模块42，用于在目标区域中显示目标图片。

一种实现方式中，第一显示模块42具体用于当目标区域为多个区域时，在多个目标区域均显示目标图片。

可选地，该装置还包括第二显示模块以及第三确定模块。

第二显示模块，用于若确定能从预设存储空间中获取到目标图片，则显示目标图片。

第三确定模块，用于若确定不能从预设存储空间中获取到目标图片，则确定执行根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定目标显示状态对应的目标图片的步骤。

可选地，该装置还包括：第一生成模块、第二生成模块、第一建立模块、以及第二建立模块。

第一生成模块，用于生成UI组件的所有显示状态。

第二生成模块，用于为每个显示状态生成对应的图片。

第一建立模块，用于建立显示状态与图片的第一映射关系。

第二建立模块，用于建立当前显示状态、事件以及转换后显示状态的第二映射关系。

本发明实施例所提供的图形界面的加载装置可执行本发明图1所示实施例所提供的图形界面的加载方法，具备执行方法相应的功能模块和有益效果。

图5为本发明提供的图形界面的加载装置实施例二的结构示意图。本实施例在图4所示实施例的基础上，对图形界面的加载装置包括的其他模块作一详细说明。如图5所示，该图形界面的加载装置还包括第二确定模块51。

第二确定模块51，用于在接收到触发显示状态转换的目标事件时，根据当前显示状态、事件以及转换后显示状态的第二映射关系，以及目标显示状态及目标事件，确定与目标显示状态及目标事件对应的转换后目标显示状态。

本实施例中，第一确定模块41，还用于根据第一映射关系以及转换后目标显示状态，确定转换后目标显示状态对应的转换后目标图片；

本实施例中，第一显示模块42，还用于在目标区域中显示转换后目标图片。

可选地，目标事件包括用户操作引起的事件。

本发明实施例所提供的图形界面的加载装置可执行本发明图2所示实施例所提供的图形界面的加载方法，具备执行方法相应的功能模块和有益效果。

图6为本发明提供的计算机设备的结构示意图。如图6所示，该计算机设备包括处理器70和存储器71。该计算机设备中处理器70的数量可以是一个或多个，图6中以一个处理器70为例；该计算机设备的处理器70和存储器71可以通过总线或其他方式连接，图6中以通过总线连接为例。

存储器71作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明实施例中的图形界面的加载方法对应的程序指令以及模块(例如，图形界面的加载装置中的第一确定模块41以及第一显示模块42)。处理器70通过运行存储在存储器71中的软件程序、指令以及模块，从而执行计算机设备的各种功能应用以及数据处理，即实现上述的图形界面的加载方法。

存储器71可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需的应用程序；存储数据区可存储根据计算机设备的使用所创建的数据等。此外，存储器71可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器71可进一步包括相对于处理器70远程设置的存储器，这些远程存储器可以通过网络连接至计算机设备。上述网络的实施例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

本发明还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行一种图形界面的加载方法，该方法包括：

根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片；

在目标区域中显示所述目标图片。

当然，本发明实施例所提供的一种包含计算机可执行指令的存储介质，其计算机可执行指令不限于如上所述的方法操作，还可以执行本发明任意实施例所提供的图形界面的加载方法中的相关操作。

通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本发明可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如计算机的软盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、闪存(FLASH)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

值得注意的是，上述图形界面的加载装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种图形界面的加载方法，其特征在于，包括：

根据用户界面UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片；

在目标区域中显示所述目标图片。

2.根据权利要求1所述的方法，其特征在于，所述在目标区域中显示所述目标图片之后，所述方法还包括：

在接收到触发显示状态转换的目标事件时，根据当前显示状态、事件以及转换后显示状态的第二映射关系，以及所述目标显示状态及所述目标事件，确定与目标显示状态及所述目标事件对应的转换后目标显示状态；

根据所述第一映射关系以及所述转换后目标显示状态，确定所述转换后目标显示状态对应的转换后目标图片；

在所述目标区域中显示所述转换后目标图片。

3.根据权利要求1或2所述的方法，其特征在于，所述第一映射关系为显示状态的标识值与图片的映射关系；

相应地，根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片，包括：

将所述第一映射关系中，所述目标显示状态的标识值对应的图片确定为所述目标图片。

4.根据权利要求1或2所述的方法，其特征在于，根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片之前，所述方法还包括：

若确定能从预设存储空间中获取到所述目标图片，则显示所述目标图片；

若确定不能从所述预设存储空间中获取到所述目标图片，则确定执行根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片的步骤。

5.根据权利要求1或2所述的方法，其特征在于，所述在目标区域中显示所述目标图片，包括：

当所述目标区域为多个区域时，在多个所述目标区域均显示所述目标图片。

6.根据权利要求1或2所述的方法，其特征在于，根据UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片之前，所述方法还包括：

生成所述UI组件的所有显示状态；

为每个所述显示状态生成对应的图片；

建立所述显示状态与图片的第一映射关系；

建立当前显示状态、事件以及转换后显示状态的第二映射关系。

7.根据权利要求2所述的方法，其特征在于，所述目标事件包括用户操作引起的事件。

8.一种图形界面的加载装置，其特征在于，包括：

第一确定模块，用于根据用户界面UI组件的显示状态与图片的第一映射关系以及目标显示状态，确定所述目标显示状态对应的目标图片；

第一显示模块，用于在目标区域中显示所述目标图片。

9.一种计算机设备，其特征在于，所述计算机设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一所述的图形界面的加载方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7中任一所述的图形界面的加载方法。

Images