CN109344352B - 页面加载方法、装置及电子设备 - Google Patents

Abstract

本发明公开了一种页面加载装置、方法及电子设备。该方法包括：接收用户对目标页面的加载操作，获取目标页面的页面布局信息；根据页面布局信息，生成对应的加载页面；在获取目标页面的页面数据过程中，显示加载页面。根据本发明，提供适配待加载的目标页面的页面布局而变化的加载页面在页面加载过程中展示，实现独特的页面加载效果，提升用户体验。

Description

页面加载方法、装置及电子设备

技术领域

本发明涉及应用技术领域，更具体地，涉及一种页面加载方法、装置及电子设备。

背景技术

随着计算机、互联网技术的飞速发展以及电子设备智能化的普及，人们已经习惯通过诸如智能手机、平板电脑等这类电子设备运行应用(APP)，通过人机交互操作与应用进行交互，获取应用提供的应用服务。

提供网络访问服务的应用所提供的应用功能中，通常包括页面加载功能。在应用加载页面时，从向页面服务器发送页面数据请求，到根据页面服务器返回的页面数据在电子设备的显示屏幕上渲染得到对应的页面的过程中，应用通常会展示一个提示“加载中”动态图的加载页面(如图1所示)，作为加载过程中页面缺失的替代，直到页面加载完成显示加载后的页面，以保证用户体验。

但是，目前可向用户提供网络访问服务的应用虽然类型各异、数量众多，但是页面加载过程中显示的加载页面都是千篇一律，十分单调，并不能给予用户独特新颖的页面加载体验。

发明内容

本发明的一个目的是提供一种用于加载页面的新技术方案。

根据本发明的第一方面，提供了一种页面加载方法，其中，包括：

接收用户对目标页面的加载操作，获取所述目标页面的页面布局信息；

根据所述页面布局信息，生成对应的加载页面；

在获取所述目标页面的页面数据过程中，显示所述加载页面。

可选地，所述方法还包括：

在接收用户对目标页面的加载操作之前，获取所述目标页面的页面布局信息并保存于本地，以供在接收用户对目标页面的加载操作时读取。

可选地，所述页面布局信息至少包括所述页面包括的每个布局项的布局项信息；

所述根据所述页面布局信息，生成对应的加载页面的步骤包括：

对所述目标页面中包括的每个布局项，根据所述布局项的所述布局项信息，生成对应的布局替代项并确定每个所述布局替代项的区域位置；

基于每个所述布局替代项以及对应的区域位置，渲染生成所述加载页面。

可选地，所述布局项信息至少包括每个所述布局项的布局位置、布局尺寸、每个所述布局项所包括的布局元素以及每个所述布局元素的布局样式；

对所述目标页面中包括的每个布局项，根据所述布局项的所述布局项信息，生成对应的布局替代项并确定每个所述布局替代项的区域位置的步骤包括：

对每个所述布局项，创建区域尺寸与所述布局项的布局尺寸相同的空白区域；

对每个所述布局项所包括的每个所述布局元素，根据所述布局元素的布局样式，生成对应的替代布局元素并设置于与所述布局项对应的所述空白区域中，得到与所述布局项对应的所述布局替代项；

对每个所述布局项，将所述布局项的布局位置确定为对应的所述布局替代项的区域位置。

进一步可选地，所述布局样式至少包括所述布局元素的元素尺寸、在所述布局项中的元素位置以及显示样式；

所述对每个所述布局项所包括的每个所述布局元素，根据所述布局元素的布局样式，生成对应的替代布局元素并设置于与所述布局项对应的所述空白区域中，得到与所述布局项对应的所述布局替代项的步骤，包括：

对每个所述布局元素，创建区域尺寸与所述布局元素的元素尺寸相同的色块区域；其中，所述色块区域是填充符合预设类型的颜色的显示区域；

对每个所述布局元素，设置对应的所述色块区域的显示样式与所述布局元素的显示样式相同，得到对应的所述替代布局元素；

对每个所述布局元素，将所述布局元素在所述布局项中的元素位置作为对应的所述替代布局元素在所述布局替代项中的元素位置，以设置所述布局替代元素得到所述布局替代项。

可选地，所述方法还可包括：

在获取所述目标页面的页面数据后，根据所述加载页面与所述目标页面的页面数据得到所述目标页面，并显示所述目标页面。

进一步可选地，

所述目标页面中至少包括一个布局项，每个所述布局项中至少包括一个布局元素；

所述目标页面的页面数据包括所述目标页面中包括每个布局元素的元素数据；

所述加载页面中包括与所述目标页面中每个所述布局项对应的布局替代项，每个所述布局替代项中包括与对应的所述布局项中包括的每个布局元素对应的布局替代元素；

所述在获取所述目标页面的页面数据后，根据所述加载页面与所述目标页面的页面数据得到所述目标页面的步骤包括：

在所述加载页面中删除每个所述替代布局元素，并对应填充与所述替代布局元素对应的所述布局元素的元素数据，渲染得到对应的目标页面。

可选地，所述目标页面中至少包括一个列表项，每个所述列表项中至少包括一个列表元素；所述列表元素至少包括图片、标题文本、正文文本三者其中之一。

根据本发明的第二方面，提供一种页面加载装置，包括：

信息获取单元，用于接收用户对目标页面的加载操作，获取所述目标页面的页面布局信息；

页面生成单元，用于根据所述页面布局信息，生成对应的加载页面；

页面显示单元，用于在获取所述目标页面的页面数据过程中，显示所述加载页面。

根据本发明的第三方面，提供一种电子设备，其中，包括：

显示装置，用于显示页面；

存储器，用于存储可执行的指令；

处理器，用于根据所述可执行的指令的控制，运行所述电子设备执行如本发明的第一方面提供的任意一项所述页面加载方法。

根据本公开的一个实施例，通过获取待加载的目标页面的页面布局信息生成对应的加载页面，以在获取目标页面的页面数据时展示该加载页面，提供适配待加载的目标页面的页面布局而变化的加载页面在页面加载过程中展示，实现独特的页面加载效果，提升用户体验。

通过以下参照附图对本发明的示例性实施例的详细描述，本发明的其它特征及其优点将会变得清楚。

附图说明

被结合在说明书中并构成说明书的一部分的附图示出了本发明的实施例，并且连同其说明一起用于解释本发明的原理。

图1是现有技术中加载页面的例子的示意图。

图2显示可用于实现本发明的实施例的电子设备1000的硬件配置的例子的框图。

图3示出了本发明的实施例的页面加载方法的流程图。

图4示出了本发明的实施例的布局项的例子的示意图。

图5示出了本发明的实施例的目标页面的例子的示意图。

图6示出了本发明的实施例的生成加载页面的步骤的流程图。

图7示出了本发明的实施例的布局替代项的例子的示意图。

图8示出了本发明的实施例的加载页面的例子的示意图。

图9示出了本发明的实施例的加载页面的又一例子的示意图。

图10示出了本发明的实施例的页面加载装置3000的框图。

图11示出了本发明的实施例的电子设备4000的框图。

具体实施方式

现在将参照附图来详细描述本发明的各种示例性实施例。应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

在这里示出和讨论的所有例子中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它例子可以具有不同的值。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

<硬件配置>

图2是示出可以实现本发明的实施例的电子设备1000的硬件配置的框图。

电子设备1000可以是便携式电脑、台式计算机、手机、平板电脑等。如图2所示，电子设备1000可以包括处理器1100、存储器1200、接口装置1300、通信装置1400、显示装置1500、输入装置1600、扬声器1700、麦克风1800等等。其中，处理器1100可以是中央处理器CPU、微处理器MCU等。存储器1200例如包括ROM(只读存储器)、RAM(随机存取存储器)、诸如硬盘的非易失性存储器等。接口装置1300例如包括USB接口、耳机接口等。通信装置1400例如能够进行有线或无线通信，具体地可以包括Wifi通信、蓝牙通信、2G/3G/4G/5G通信等。显示装置1500例如是液晶显示屏、触摸显示屏等。输入装置1600例如可以包括触摸屏、键盘、体感输入等。用户可以通过扬声器1700和麦克风1800输入/输出语音信息。

图2所示的电子设备仅仅是说明性的并且决不意味着对本发明、其应用或使用的任何限制。应用于本发明的实施例中，电子设备1000的所述存储器1200用于存储指令，所述指令用于控制所述处理器1100进行操作以执行本发明实施例提供的任意一项页面加载方法。本领域技术人员应当理解，尽管在图2中对电子设备1000示出了多个装置，但是，本发明可以仅涉及其中的部分装置，例如，电子设备1000只涉及处理器1100和存储装置1200。技术人员可以根据本发明所公开方案设计指令。指令如何控制处理器进行操作，这是本领域公知，故在此不再详细描述。

<实施例>

本发明实施例的总体构思，是提供一种用于页面加载的新技术方案，通过获取待加载的目标页面的页面布局信息生成对应的加载页面，以在获取目标页面的页面数据时展示该加载页面，提供适配待加载的目标页面的页面布局而变化的加载页面在页面加载过程中展示，实现独特的页面加载效果，提升用户体验。

在本实施例中，提供一种页面加载方法。该页面是任意的可被安装或者加载后运行于电子设备中提供对应的应用服务的软件产品或者应用程序，通过电子设备的显示屏幕展示的提供内容或者服务的应用页面，例如，可以是提供网络访问服务的应用(例如浏览器)展示的应用页面。

在本实施例中，页面加载方法可以如图3所示，包括：步骤S2100-S2300。

步骤S2100，接收用户对目标页面的加载操作，获取目标页面的页面布局信息。

对目标页面的加载操作，是用户实施的、触发请求加载页面的人机交互操作。页面的加载操作可以包括在应用界面上实施的点击与页面对应的链接或者图标、勾选与目标页面对应的图标等操作，在此不一一列举。

页面的页面布局信息是与页面的布局设计相关的信息。

在一个例子中，页面布局信息中至少包括页面包括的每个布局项的布局项信息。该布局项是根据具体的页面布局设计划分页面包括的控件、内容得到的布局单元，划分原则可以根据具体的应用场景或者应用需求设置。例如，布局项可以是列表项，该列表项可以是如图4所示的由图片(黑色方框)、标题文本(“Titlie1”)、正文文本(“DescriptionDescription”)构成的列表项。

布局项信息是布局项在对应的页面中与页面布局设计相关的信息。例如，布局项信息可以每个布局项的布局位置、布局尺寸以及每个布局项所包括的布局元素以及每个布局元素的布局样式。布局位置是布局项在对应的页面中具体的页面位置，可以是页面坐标等。布局尺寸是布局项在对应的页面中显示时所涉及的显示区域的尺寸。

布局项中包括的布局元素是构成布局项的页面元素，例如，布局项是列表项，布局项中包括的布局元素是构成列表项的页面元素，以图4所示的列表项中，布局元素包括图片、标题文本、正文文本。布局样式是布局元素在对应的布局项中与布局设计相关的信息。布局样式至少包括布局元素的元素尺寸、在布局项中的元素位置以及显示样式。元素位置是布局元素在对应的布局项中具体的页面位置，可以是绝对的页面坐标或者相对的布局项坐标等。元素尺寸是布局元素在对应的布局项中显示时所涉及的显示区域的尺寸。显示样式包括布局元素显示区域的形状、显示效果，例如，如图4所示的布局项中，布局元素为图片时显示样式边角圆角，显示样式中对应包括圆角配置信息(圆角形状、角度等)。

在本实施例中，目标页面中可以包括各种类型的布局项，例如可以是列表项、图表项、图文项、图片项或者文本项等，目标页面中也可以包括具有不同的布局设计的同一类型的布局项，例如，具有不同布局设计的列表项等。

在一个例子中，目标页面至少包括一个列表项，每个列表项中至少包括一个列表元素，该列表元素至少包括图片、标题文本、正文文本三者其中之一，例如，目标页面可以如图5所示。

在本例中，在接收用户对目标页面的加载操作时，获取目标页面的页面布局信息，可以结合后续步骤，根据目标页面的页面布局信息生成加载页面以在获取目标页面的页面数据时展示该加载页面，提供适配待加载的目标页面的页面布局而变化的加载页面在页面加载过程中展示，实现独特的页面加载效果，提升用户体验。

在本实施例中，可以向提供目标页面的页面服务器请求获取目标页面的页面布局信息，页面服务器可以在接收目标页面上传者上传的目标页面的页面数据，提供接口供目标页面上传者同时上传目标页面的页面布局信息并保存在本地供请求获取，或者根据目标页面的页面框架分析对应目标页面的页面布局信息并保存在本地供请求获取。或者，也可以向提供目标页面的页面服务器请求获取目标页面的页面框架后从页面框架中分析得到页面布局信息。

在实际应用中，受限与网络速度、通信环境、设备处理能力等因素，在接收用户对目标页面的加载操作时，实时获取目标页面的页面布局信息可能会存在一定的延迟，会影响后续生成加载页面的实时显示，影响用户体验。针对这种情况，在一个例子中，本实施例中提供的页面加载方法还包括：

在接收用户对目标页面的加载操作之前，获取目标页面的页面布局信息并保存于本地，以供在接收用户对目标页面的加载操作时读取。

通过在用户对目标页面的加载操作之前，预先获取目标页面的页面布局信息，可以在接收用户对目标页面的加载操作，直接读取目标页面的页面布局信息生成加载页面，省去实时获取目标页面的页面布局信息的处理时间，无延迟地显示加载页面，优化页面加载效果。

在本例中，为了进一步提升处理效率，可以采用类似网页预读的手段，在判断用户存在加载目标页面的需求时，提前实施上述预先获取目标页面的页面布局信息的步骤。

在获取目标页面的页面布局信息之后，进入：

步骤S2200，根据页面布局信息，生成对应的加载页面。

根据目标页面的页面布局信息生成加载页面，可以结合后续步骤，在获取目标页面的页面数据时展示该加载页面，提供适配待加载的目标页面的页面布局而变化的加载页面在页面加载过程中展示，实现独特的页面加载效果，提升用户体验。

在一个例子中，页面布局信息至少包括页面包括的每个布局项的布局项信息。该布局项是根据具体的页面布局设计划分页面包括的控件、内容得到的布局单元，划分原则可以根据具体的应用场景或者应用需求设置。例如，布局项可以是列表项，该列表项可以如图4所示的由图片(黑色方框)、标题文本(“Titlie1”)、正文文本(“DescriptionDescription”)构成的列表项。布局项信息是布局项在对应的页面中与页面布局设计相关的信息。布局项信息是布局项在对应的页面中与页面布局设计相关的信息。例如，布局项信息可以每个布局项的布局位置、布局尺寸以及每个布局项所包括的布局元素以及每个布局元素的布局样式。布局位置是布局项在对应的页面中具体的页面位置，可以是页面坐标等。布局尺寸是布局项在对应的页面中显示时所涉及的显示区域的尺寸。

对应的，步骤S2200可以如图6所示，包括：步骤S2210-S2220。

步骤S2210，对目标页面中包括的每个布局项，根据布局项的布局项信息，生成对应的布局替代项并确定每个布局替代项的区域位置。

布局替代项是根据对应的布局项的布局项信息生成的、设置在加载页面中的布局单元，该布局替代项可以保持对应的布局项在目标页面中显示时的所有原有布局设计，使得结合后续步骤基于布局替代项生成的加载页面，可以复刻目标页面的页面布局，实现适配目标页面的实际的布局样式变化生成加载页面。

布局替代项的生成以及具体的区域位置，可以根据具体应用场景或者应用需求设置，只要能实现保持对应的布局项在目标页面中显示时的所有原有布局设计即可。

例如，布局项信息中至少包括每个布局项的布局位置、布局尺寸、每个布局项所包括的布局元素以及每个布局元素的布局样式。布局项中包括的布局元素是构成布局项的页面元素，例如，布局项是列表项，布局项中包括的布局元素是构成列表项的页面元素，以图4所示的列表项中，布局元素包括图片、标题文本、正文文本。布局样式是布局元素在对应的布局项中与布局设计相关的信息。

对应的，步骤S2210可以通过步骤S2211-S2213实现。

步骤S2211，对每个布局项，创建区域尺寸与布局项的布局尺寸相同的空白区域。

步骤S2212，对每个布局项所包括的每个布局元素，根据该布局元素的布局样式，生成对应的替代布局元素并设置于与该布局项对应的空白区域中，得到与该布局项对应的布局替代项。

替代布局元素是根据对应的布局元素的布局样式生成的、设置在布局替代项中的页面元素，该替代布局元素可以保持对应的布局元素在布局项中显示时的所有原有布局设计，使得结合后续步骤基于替代布局元素构成的布局替代项生成的加载页面，可以复刻目标页面的全部页面布局，实现适配目标页面的实际的布局样式变化生成加载页面。

替代布局元素的生成以及在布局替代项中设备，可以根据具体应用场景或者应用需求设置，只要能实现保持对应的布局元素在对应的布局项中显示时的所有原有布局设计即可。

例如，布局样式至少包括所述布局元素的元素尺寸、在所述布局项中的元素位置以及显示样式。元素位置是布局元素在对应的布局项中具体的页面位置，可以是绝对的页面坐标或者相对的布局项坐标等。元素尺寸是布局元素在对应的布局项中显示时所涉及的显示区域的尺寸。显示样式包括布局元素显示区域的形状、显示效果，例如，如图4所示的布局项中，布局元素为图片时显示样式边角圆角，显示样式中对应包括圆角配置信息(圆角形状、角度等)。

对应的，步骤S2212可以包括：步骤S22121-S22123。

步骤S22121，对每个布局元素，创建区域尺寸与布局元素的元素尺寸相同的色块区域。

其中，色块区域是填充符合预设类型的颜色的显示区域。该预设类型的颜色可以根据具体的应用需求预先设置，例如，可以设置为灰色。

以图4所示的列表项为例，对于列表项中包括的图片、标题文本、正文文本，可以生成对应的灰色的色块区域，如图7所示。

步骤S22122，对每个所布局元素，设置对应的色块区域的显示样式与布局元素的显示样式相同，得到对应的替代布局元素。

以图4所示的列表项为例，对于列表项中包括的图片，显示样式是四角圆角，对应的，作为替代布局元素的灰色区域也被配置为四角圆角，如图7所示。

步骤S22123，对每个布局元素，将布局元素在布局项中的元素位置作为对应的替代布局元素在布局替代项中的元素位置，以设置布局替代元素得到布局替代项。

对应布局元素在布局项中的元素位置，设置对应的替代布局元素在布局替代项中的元素位置，同时作为替代布局元素的色块区域的区域尺寸与布局元素的元素尺寸相同、显示样式也与布局元素相同，如此可以使得替代布局元素相对于布局替代项，保持对应的布局元素相对布局项中的显示比例、显示位置，实现复刻对应的布局设计。

以图4所示的列表项为例为例，可以得到对应的布局替代项如图7所示。

在步骤S2212之后，进入：

步骤S2213，对每个布局项，将布局项的布局位置确定为对应的布局替代项的区域位置。

将布局项的布局位置作为对应的布局替代项的区域位置，可以基于该区域位置对应在加载页面中设置布局替代项，使得加载页面的布局设计与目标页面适配，实现跟随目标页面的实际页面布局变化生成对应的加载页面。

在生成对应的布局替代项并确定每个布局替代项的区域位置之后，进入：

步骤S2220，基于每个布局替代项以及对应的区域位置，渲染生成加载页面。

每个布局替代项与目标页面中的一个布局项对应，保持对应的布局项在目标页面中的布局设计，根据每个布局替代项的区域位置，设置布局替代项在加载页面中的位置，渲染生成与目标页面保持相同的布局设计的加载页面。

以图5所示的包括多个列表向的目标页面为例，对应的，以本实施中提供的页面加载方法，可以生成如图8所示的加载页面。在实际应用中，目标页面中可能包括不同布局设计的列表项、或者与列表项类型不同的其他布局项，同样可以基于以本实施中提供的页面加载方法，渲染生成对应的加载页面，例如，如图9所示。

在生成加载页面之后，进入：

步骤S2300，在获取目标页面的页面数据过程中，显示加载页面。

通常接收用户对目标页面的加载操作后，响应该加载操作会发起请求，获取目标页面的页面数据，在获取页面数据的页面加载过程中，显示根据前述步骤生成的、与目标页面的布局设计保持相同的加载页面，提供适配待加载的目标页面的页面布局而变化的加载页面在页面加载过程中展示，实现独特的页面加载效果，提升用户体验。

在一个例子中，提供的页面加载方法还包括：

在获取目标页面的页面数据后，根据加载页面与目标页面的页面数据得到目标页面，并显示目标页面。

本实施例中的加载页面保持与目标页面相同的布局设计，在此基础上，基于加载页面与目标页面的页面数据，渲染生成对应的目标页面，可以简化根据目标页面的页面数据渲染得到目标页面的过程，提高目标页面的渲染显示效率。

例如，目标页面中至少包括一个布局项，每个布局项中至少包括一个布局元素；目标页面的页面数据包括所述目标页面中包括每个布局元素的元素数据；对应的，加载页面中包括与目标页面中每个布局项对应的布局替代项，每个布局替代项中包括与对应的布局项中包括的每个布局元素对应的布局替代元素；如此，加载页面保持与目标页面相同的布局设计。

对应的，在获取目标页面的页面数据后，根据加载页面与目标页面的页面数据得到目标页面的步骤包括：

在加载页面中删除每个替代布局元素，并对应填充与替代布局元素对应的布局元素的元素数据，渲染得到对应的目标页面。

对于每个替代布局元素，删除替代布局元素后，填充对应的、具有相同布局设计的布局元素的元素数据，可以在无需实现目标页面的页面布局，直接基于与目标页面具有相同的布局设计的加载页面，渲染生成目标页面，简化根据目标页面的页面数据渲染得到目标页面的过程，提高目标页面的渲染显示效率。

<页面加载装置>

在本实施例中，提供一种页面加载装置3000，如图10所示，包括：信息获取单元3100、页面生成单元3200以及页面显示单元3300，用于实施本实施例中提供的任意一项页面加载方法，在此不再赘述。

页面加载装置3000，包括：

信息获取单元3100，用于接收用户对目标页面的加载操作，获取所述目标页面的页面布局信息；

页面生成单元3200，用于根据所述页面布局信息，生成对应的加载页面；

页面显示单元3300，用于在获取所述目标页面的页面数据过程中，显示所述加载页面。

可选地，页面加载装置3000，还包括：

用于在接收用户对目标页面的加载操作之前，获取所述目标页面的页面布局信息并保存于本地，以供在接收用户对目标页面的加载操作时读取的装置。

可选地，所述页面布局信息至少包括所述页面包括的每个布局项的布局项信息；

所述页面生成单元3200包括：

用于对所述目标页面中包括的每个布局项，根据所述布局项的所述布局项信息，生成对应的布局替代项并确定每个所述布局替代项的区域位置的装置；

用于基于每个所述布局替代项以及对应的区域位置，渲染生成所述加载页面的装置。

进一步可选地，所述布局项信息至少包括每个所述布局项的布局位置、布局尺寸、每个所述布局项所包括的布局元素以及每个所述布局元素的布局样式；

所述用于对所述目标页面中包括的每个布局项，根据所述布局项的所述布局项信息，生成对应的布局替代项并确定每个所述布局替代项的区域位置的装置包括：

用于对每个所述布局项，创建区域尺寸与所述布局项的布局尺寸相同的空白区域的装置；

用于对每个所述布局项所包括的每个所述布局元素，根据所述布局元素的布局样式，生成对应的替代布局元素并设置于与所述布局项对应的所述空白区域中，得到与所述布局项对应的所述布局替代项的装置；

用于对每个所述布局项，将所述布局项的布局位置确定为对应的所述布局替代项的区域位置的装置。

进一步可选地，所述布局样式至少包括所述布局元素的元素尺寸、在所述布局项中的元素位置以及显示样式；

所述用于对每个所述布局项所包括的每个所述布局元素，根据所述布局元素的布局样式，生成对应的替代布局元素并设置于与所述布局项对应的所述空白区域中，得到与所述布局项对应的所述布局替代项的装置，包括：

用于对每个所述布局元素，创建区域尺寸与所述布局元素的元素尺寸相同的色块区域；其中，所述色块区域是填充符合预设类型的颜色的显示区域的装置；

用于对每个所述布局元素，设置对应的所述色块区域的显示样式与所述布局元素的显示样式相同，得到对应的所述替代布局元素的装置；

用于对每个所述布局元素，将所述布局元素在所述布局项中的元素位置作为对应的所述替代布局元素在所述布局替代项中的元素位置，以设置所述布局替代元素得到所述布局替代项的装置。

可选地，所述页面加载装置3000还包括：

用于在获取所述目标页面的页面数据后，根据所述加载页面与所述目标页面的页面数据得到所述目标页面，并显示所述目标页面的装置。

进一步可选地，

所述目标页面中至少包括一个布局项，每个所述布局项中至少包括一个布局元素；

所述目标页面的页面数据包括所述目标页面中包括每个布局元素的元素数据；

所述加载页面中包括与所述目标页面中每个所述布局项对应的布局替代项，每个所述布局替代项中包括与对应的所述布局项中包括的每个布局元素对应的布局替代元素；

所述用于在获取所述目标页面的页面数据后，根据所述加载页面与所述目标页面的页面数据得到所述目标页面，并显示所述目标页面的装置用于：

在所述加载页面中删除每个所述替代布局元素，并对应填充与所述替代布局元素对应的所述布局元素的元素数据，渲染得到对应的目标页面。

可选地，所述目标页面中至少包括一个列表项，每个所述列表项中至少包括一个列表元素；所述列表元素至少包括图片、标题文本、正文文本三者其中之一。

本领域技术人员应当明白，可以通过各种方式来实现页面加载装置3000。例如，可以通过指令配置处理器来实现页面加载装置3000。例如，可以将指令存储在ROM中，并且当启动设备时，将指令从ROM读取到可编程器件中来实现页面加载装置3000。例如，可以将页面加载装置3000固化到专用器件(例如ASIC)中。可以将页面加载装置3000分成相互独立的单元，或者可以将它们合并在一起实现。页面加载装置3000可以通过上述各种实现方式中的一种来实现，或者可以通过上述各种实现方式中的两种或更多种方式的组合来实现。

在本实施例中，页面加载装置3000可以具有多种实现形式，例如，页面加载装置3000可以是任何的提供网络访问服务的软件产品或者应用程序中运行的功能模块，或者是这些软件产品或者应用程序的外设嵌入件、插件、补丁件等，还可以是这些软件产品或者应用程序本身。

<电子设备>

在本实施例中，还提供一种电子设备4000，如图11所示，包括：

显示装置4100，用于显示页面；

存储器4200，用于存储可执行的指令；

处理器4300，用于根据所述可执行的指令的控制，运行所述电子设备4000执行本实施例中提供的任意一项所述页面加载方法。

在本实施例中，该电子设备4000可以是手机、平板电脑、掌上电脑、台式机、笔记本电脑、工作站、游戏机等任意具有对应的显示装置4100、存储器4200以及处理器4300的电子设备。例如，电子设备4000可以是安装有提供网络访问服务的应用的智能手机。

在本实施例中，电子设备4000还可以包括其他的硬件装置，例如，如图1所示的电子设备1000。

以上已经结合附图描述了本发明的实施例，根据本实施例，提供一种页面加载方法、装置及电子设备，通过获取待加载的目标页面的页面布局信息生成对应的加载页面，以在获取目标页面的页面数据时展示该加载页面，提供适配待加载的目标页面的页面布局而变化的加载页面在页面加载过程中展示，实现独特的页面加载效果，提升用户体验。

本发明可以是系统、方法和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质，其上载有用于使处理器实现本发明的各个方面的计算机可读程序指令。

计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是――但不限于――电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身，诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如，通过光纤电缆的光脉冲)、或者通过电线传输的电信号。

这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备，或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令，并转发该计算机可读程序指令，以供存储在各个计算/处理设备中的计算机可读存储介质中。

用于执行本发明操作的计算机程序指令可以是汇编指令、指令集架构(ISA)指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码，所述编程语言包括面向对象的编程语言—诸如Smalltalk、C++等，以及常规的过程式编程语言—诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。在一些实施例中，通过利用计算机可读程序指令的状态信息来个性化定制电子电路，例如可编程逻辑电路、现场可编程门阵列(FPGA)或可编程逻辑阵列(PLA)，该电子电路可以执行计算机可读程序指令，从而实现本发明的各个方面。

这里参照根据本发明实施例的方法、装置(系统)和计算机程序产品的流程图和/或框图描述了本发明的各个方面。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合，都可以由计算机可读程序指令实现。

这些计算机可读程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器，从而生产出一种机器，使得这些指令在通过计算机或其它可编程数据处理装置的处理器执行时，产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中，这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作，从而，存储有指令的计算机可读介质则包括一个制造品，其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。

也可以把计算机可读程序指令加载到计算机、其它可编程数据处理装置、或其它设备上，使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机、其它可编程数据处理装置、或其它设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。

附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分，所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。对于本领域技术人员来说公知的是，通过硬件方式实现、通过软件方式实现以及通过软件和硬件结合的方式实现都是等价的。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。本发明的范围由所附权利要求来限定。

Claims (8)

1.一种页面加载方法，其中，包括：

接收用户对目标页面的加载操作，获取所述目标页面的页面布局信息；所述页面布局信息至少包括所述页面包括的每个布局项的布局项信息；所述布局项信息至少包括每个所述布局项的布局位置、布局尺寸、每个所述布局项所包括的布局元素以及每个所述布局元素的布局样式；

根据所述页面布局信息，生成对应的加载页面；

在获取所述目标页面的页面数据过程中，显示所述加载页面；

所述根据所述页面布局信息，生成对应的加载页面的步骤包括：对所述目标页面中包括的每个布局项，根据所述布局项的所述布局项信息，生成对应的布局替代项并确定每个所述布局替代项的区域位置；基于每个所述布局替代项以及对应的区域位置，渲染生成所述加载页面；

对所述目标页面中包括的每个布局项，根据所述布局项的所述布局项信息，生成对应的布局替代项并确定每个所述布局替代项的区域位置的步骤包括：对每个所述布局项，创建区域尺寸与所述布局项的布局尺寸相同的空白区域；对每个所述布局项所包括的每个所述布局元素，根据所述布局元素的布局样式，生成对应的替代布局元素并设置于与所述布局项对应的所述空白区域中，得到与所述布局项对应的所述布局替代项；对每个所述布局项，将所述布局项的布局位置确定为对应的所述布局替代项的区域位置。

2.根据权利要求1所述的方法，其中，还包括：

在接收用户对目标页面的加载操作之前，获取所述目标页面的页面布局信息并保存于本地，以供在接收用户对目标页面的加载操作时读取。

3.根据权利要求1所述的方法，其中，

所述布局样式至少包括所述布局元素的元素尺寸、在所述布局项中的元素位置以及显示样式；

所述对每个所述布局项所包括的每个所述布局元素，根据所述布局元素的布局样式，生成对应的替代布局元素并设置于与所述布局项对应的所述空白区域中，得到与所述布局项对应的所述布局替代项的步骤，包括：

对每个所述布局元素，创建区域尺寸与所述布局元素的元素尺寸相同的色块区域；其中，所述色块区域是填充符合预设类型的颜色的显示区域；

对每个所述布局元素，设置对应的所述色块区域的显示样式与所述布局元素的显示样式相同，得到对应的所述替代布局元素；

对每个所述布局元素，将所述布局元素在所述布局项中的元素位置作为对应的所述替代布局元素在所述布局替代项中的元素位置，以设置所述布局替代元素得到所述布局替代项。

4.根据权利要求1所述的方法，其中，还包括：

在获取所述目标页面的页面数据后，根据所述加载页面与所述目标页面的页面数据得到所述目标页面，并显示所述目标页面。

5.根据权利要求1所述的方法，其中，

所述目标页面中至少包括一个布局项，每个所述布局项中至少包括一个布局元素；

所述目标页面的页面数据包括所述目标页面中包括每个布局元素的元素数据；

所述加载页面中包括与所述目标页面中每个所述布局项对应的布局替代项，每个所述布局替代项中包括与对应的所述布局项中包括的每个布局元素对应的布局替代元素；

所述在获取所述目标页面的页面数据后，根据所述加载页面与所述目标页面的页面数据得到所述目标页面的步骤包括：

在所述加载页面中删除每个所述替代布局元素，并对应填充与所述替代布局元素对应的所述布局元素的元素数据，渲染得到对应的目标页面。

6.根据权利要求1所述的方法，其中，

所述目标页面中至少包括一个列表项，每个所述列表项中至少包括一个列表元素；所述列表元素至少包括图片、标题文本、正文文本三者其中之一。

7.一种页面加载装置，其中，包括：

信息获取单元，用于接收用户对目标页面的加载操作，获取所述目标页面的页面布局信息；所述页面布局信息至少包括所述页面包括的每个布局项的布局项信息；所述布局项信息至少包括每个所述布局项的布局位置、布局尺寸、每个所述布局项所包括的布局元素以及每个所述布局元素的布局样式；

页面生成单元，用于根据所述页面布局信息，生成对应的加载页面；

其中，所述页面生成单元包括：用于对所述目标页面中包括的每个布局项，根据所述布局项的所述布局项信息，生成对应的布局替代项并确定每个所述布局替代项的区域位置的装置；用于基于每个所述布局替代项以及对应的区域位置，渲染生成所述加载页面的装置；

其中，所述用于对所述目标页面中包括的每个布局项，根据所述布局项的所述布局项信息，生成对应的布局替代项并确定每个所述布局替代项的区域位置的装置包括：用于对每个所述布局项，创建区域尺寸与所述布局项的布局尺寸相同的空白区域的装置；用于对每个所述布局项所包括的每个所述布局元素，根据所述布局元素的布局样式，生成对应的替代布局元素并设置于与所述布局项对应的所述空白区域中，得到与所述布局项对应的所述布局替代项的装置；用于对每个所述布局项，将所述布局项的布局位置确定为对应的所述布局替代项的区域位置的装置；

页面显示单元，用于在获取所述目标页面的页面数据过程中，显示所述加载页面。

8.一种电子设备，其中，包括：

显示装置，用于显示页面；

存储器，用于存储可执行的指令；

处理器，用于根据所述可执行的指令的控制，运行所述电子设备执行如权利要求1-6所述的任意一项所述页面加载方法。

Images