CN115186207A - 加载页面资源的方法及装置、电子设备 - Google Patents

Abstract

本发明实施例提供了一种加载页面资源的方法及装置、电子设备，该方法，包括：在加载目标页面的情况下，获取目标页面中第一数量的页面元素各自对应的资源信息；加载第一数量的页面元素各自对应的资源信息；显示第一数量的页面元素中第二数量的页面元素各自对应的资源信息。在接收到用户的第一目标输入的情况下，显示全部或部分第一目标页面元素对应的资源信息。本发明实施例首次加载资源信息时将获取到的资源信息全部加载到了目标页面，从而在需要展示剩余资源信息时，可以节省加载资源信息的流程，从而缩短用户的等待时间，提升用户的使用体验。

Description

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

技术领域

本发明涉及网络技术领域，尤其涉及一种加载页面资源的方法及装置、电子设备。

背景技术

在互联网飞速发展的时代背景下，人们只需使用终端设备即可访问互联网中的资源信息，足不出户的完成工作、生活当中的各种事情。通常互联网中的资源信息会被加载至页面中，通过页面的形式将资源信息展示给人们。随着互联网技术的不断发展，人们对使用体验的要求也在不断提升。而在用户使用体验中，用户等待的时间占据着十分重要的地位。目前，用户等待主要分为两个阶段，第一个阶段是首次打开页面时，用户等待页面初始化并首次加载数据；第二个阶段是页面已经加载并显示了部分数据内容时，在需要查看剩余数据内容的情况下，用户等待当前页面加载并显示剩余页面数据。

目前，针对第二个阶段的用户等待，通常采用预加载技术缩短用户的等待时长。即在用户访问页面的过程中，将当前页面中可能访问到的尚未显示的资源信息提前下载到本地。当用户需要访问这些资源信息时，从本地获取并加载显示这些资源信息，无需再次从服务器获取资源信息，从而缩短了用户在第二阶段的等待时长。

然而，在第二阶段中想要将用户尚未访问到的资源信息显示给用户，加载过程必不可少。随着资源信息所占空间的不断增大，即使使用了预加载技术，仍然需要较长的时间加载这些占据较大空间的资源信息，使得用户在第二阶段仍需要等待较长时间才能够查看资源信息。

发明内容

鉴于上述问题，提出了本发明实施例以便提供一种克服上述问题或者至少部分地解决上述问题的加载页面资源的方法及装置、电子设备。

第一方面，本发明实施例提供了一种加载页面资源的方法，所述方法包括：

在加载目标页面的情况下，获取所述目标页面中第一数量的页面元素各自对应的资源信息；

加载所述第一数量的页面元素各自对应的资源信息；

显示所述第一数量的页面元素中第二数量的页面元素各自对应的资源信息，其中，所述第二数量的数值小于所述第一数量的数值；

在接收到用户的第一目标输入的情况下，显示全部或部分第一目标页面元素对应的资源信息，其中，所述第一目标页面元素为所述第一数量的页面元素中未显示过资源信息的页面元素。

可选地，在显示全部或部分第一目标页面元素对应的资源信息的情况下，所述方法还包括：

监测所述第一目标页面元素的数量；

在所述第一目标页面元素的数量小于或等于第一目标数量的情况下，获取第三数量的页面元素各自对应的资源信息，其中，所述第三数量的页面元素包括所述目标页面的所有页面元素中除所述第一数量的页面元素之外的部分或全部页面元素；

加载所述第三数量的页面元素各自对应的资源信息；

在接收到用户在所述目标页面的第二目标输入且所述第一目标页面元素的数量小于预设数量的情况下，显示部分或者全部第二目标页面元素对应的资源信息，其中，所述第二目标页面元素为所述第三数量的页面元素中未显示过资源信息的页面元素。

可选地，所述显示所述第一数量的页面元素中第二数量的页面元素各自对应的资源信息，包括：

在所述第一数量的页面元素中按照第一目标策略选择第二数量的页面元素；

将所述第二数量的页面元素的目标属性的属性值均调整为用于显示页面元素的第一属性值；

将剩余页面元素的目标属性的属性值均调整为用于隐藏页面元素的第二属性值，其中，所述剩余页面元素为所述第一数量的页面元素中除所述第二数量的页面元素之外的页面元素。

可选地，所述显示部分第一目标页面元素对应的资源信息，包括：

在全部所述第一目标页面元素中按照第二目标策略选择部分第一目标页面元素；

将所述部分第一目标页面元素的目标属性的属性值均调整为用于显示页面元素的第一属性值，以及将所述第一目标页面元素中剩余页面元素的目标属性的属性值均调整为用于隐藏页面元素的第二属性值。

可选地，所述第一数量的页面元素为相同类型的超文本标记语言标签构成的页面元素、和/或对应的资源信息大于或等于预设值的页面元素。

可选地，所述相同类型的超文本标记语言标签包括内联框架(iframe)标签。

第二方面，本发明实施例还提供一种加载页面资源的装置，所述装置包括：

第一获取模块，用于在加载目标页面的情况下，获取所述目标页面中第一数量的页面元素各自对应的资源信息；

第一加载模块，用于加载所述第一数量的页面元素各自对应的资源信息；

第一显示模块，用于显示所述第一数量的页面元素中第二数量的页面元素各自对应的资源信息，其中，所述第二数量的数值小于所述第一数量的数值；

第二显示模块，用于在接收到用户的第一目标输入的情况下，显示全部或部分第一目标页面元素对应的资源信息，其中，所述第一目标页面元素为所述第一数量的页面元素中未显示过资源信息的页面元素。

可选地，所述装置还包括：

监测模块，用于在显示全部或部分第一目标页面元素对应的资源信息的情况下，监测所述第一目标页面元素的数量；

第二获取模块，用于在所述第一目标页面元素的数量小于或等于第一目标数量的情况下，获取第三数量的页面元素各自对应的资源信息，其中，所述第三数量的页面元素包括所述目标页面的所有页面元素中除所述第一数量的页面元素之外的部分或全部页面元素；

第二加载模块，用于加载所述第三数量的页面元素各自对应的资源信息；

第三显示模块，用于在接收到用户在所述目标页面的第二目标输入且所述第一目标页面元素的数量小于预设数量的情况下，显示部分或者全部第二目标页面元素对应的资源信息，其中，所述第二目标页面元素为所述第三数量的页面元素中未显示过资源信息的页面元素。

第三方面，本发明实施例还提供一种电子设备，该电子设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上所述的加载页面资源的方法中的步骤。

第四方面，本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如第一方面中所述的加载页面资源的方法的步骤。

在本发明实施例中，在加载目标页面的情况下，将获取所述目标页面中第一数量的页面元素各自对应的资源信息，从而得到需要展示在目标页面中的资源信息。然后将得到的这些需要展示在目标页面中的资源信息全部加载至目标页面中，并将这些需要展示在目标页面中的部分资源信息显示出来。从而在接收到用户的第一目标输入之后，将直接展示已加载至目标页面的且未被显示过的资源信息。相比于预加载技术，本发明实施例首次加载资源信息时将获取到的资源信息全部加载到了目标页面，从而在需要展示剩余资源信息时，可以节省加载资源信息的流程，直接将已加载的资源信息显示出来。尤其针对占据较大空间的资源信息，可以将其快速的显示出来，从而缩短用户的等待时间，提升用户的使用体验。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的加载页面资源的方法的步骤流程图；

图2为本发明实施例提供的加载页面资源的方法的实际应用示意图；

图3为本发明实施例提供的加载页面资源的装置的结构框图；

图4为本发明实施例提供的电子设备的结构框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本发明的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。

在本发明的各种实施例中，应理解，下述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

参见图1，本发明实施例提供了一种页面资源加载的方法，该方法包括：

步骤101：在加载目标页面的情况下，获取目标页面中第一数量的页面元素各自对应的资源信息。

应当说明的是，加载目标页面的情况可以理解为经用户触发或自动触发页面跳转之后，加载跳转后的页面的情况，跳转后的页面即为目标页面。当然，也可以是启动应用后加载应用首页的情况，应用首页即为目标页面。可以理解的是，在目标页面开发过程中，通常需要编写不同的页面元素用以加载不同的资源信息，从而将不同的资源信息显示在目标页面中。

具体地，目标页面可以为安装于手机、电脑等终端设备中的应用程序的任一页面。例如，目标页面可以为Web网页(web page)，也就是常见的浏览器中加载的网页，但不限于此。目标页面还可以为应用程序中其它类型的页面。其中，在目标页面为Web网页时，页面元素为HTML(超文本标记语言，HyperText Markup Language)标签构成的元素，其中，HTML标签构成的元素可以为：<imgsrc＝"/i/eg_tip.jpg"alt＝"花港-郁金香"/>，这里仅以<img>标签为例进行说明，并不限于<img>标签，还可以为任意的HTML标签。相应的，"/i/eg_tip.jpg"所指示的图片即为该页面元素对应的资源信息中的一种。

第一数量的页面元素可以为目标页面中的所有页面元素，也可以为目标页面中的部分页面元素。这里，可以根据目标页面的显示需求自行设定第一数量的具体数值。例如目标页面包括10个页面元素，若显示需求为仅需显示5个页面元素，则第一数量设置为5个，在加载目标页面的情况下，将获取5个页面元素各自对应的资源信息。

步骤102：加载第一数量的页面元素各自对应的资源信息。

应当说明的是，资源信息在页面的展示过程中，需要先渲染至页面，然后利用极短的时间进行进一步处理，从而将渲染至页面的资源信息展示在页面中。因此，加载页面元素对应的资源信息可以理解为将页面元素对应的资源信息渲染至目标页面。这里，需要将已获取的目标页面中所有的页面元素各自对应的资源信息全部加载至目标页面。

步骤103：显示第一数量的页面元素中第二数量的页面元素各自对应的资源信息。

应当说明的是，第一数量，第二数量均大于零个，且第二数量的数值小于第一数量的数值。也就是说，仅展示第一数量的页面元素中的部分页面元素对应的资源信息，第一数量的页面元素中除第二数量的页面元素之外的页面元素对应的资源信息处于隐藏状态。例如第一数量的页面元素对应的资源信息为10张图片，第二数量的页面元素对应的资源信息为这10张图片中的部分图片，若每张图片具有一个编号且从0开始到9结束，则在加载时将编号0开始到9结束的10张图片全部加载到目标页面，在显示时可以仅显示编号为0的图片，将编号1开始到9结束的9张图片设置为隐藏状态，从而用户在查看目标页面时，只能看到编号为0的图片。第二数量可以基于第一数量的具体数值确定，在保证第二数量的数值小于第一数量的数值的情况下，第二数量的数值为一较小的数值，例如第二数量的数值可以为1，但不限于此。

可以理解的是，在一些场景下通过显示部分加载过的资源信息，可以合理地节省硬件资源，例如用户在搜索同类型图片过程中，搜索结果界面中第一数量的页面元素的资源信息为10张图片，此时由于10张图片为同类型的图片，因此用户仅需查看部分图片可能就会满足对该类型图片的需求，此时第二数量的页面元素的资源信息可以为10张图片中的两张，仅展示两张图片供用户查看即可。

步骤104：在接收到用户的第一目标输入的情况下，显示全部或部分第一目标页面元素对应的资源信息。

应当说明的是，第一目标输入包括点击、滑动、长按等输入，但不限于此。由于第二数量小于第一数量，在步骤103中对资源信息进行首次显示时，仅显示了已加载至目标页面的资源信息中的部分资源信息。因此，在接收到第一目标输入后，将显示已经加载至目标页面，却并未显示过的资源信息，即第一目标页面元素对应的资源信息。其中，第一目标页面元素为第一数量的页面元素中未显示过资源信息的页面元素。可以理解的是，每次接收到用户的第一目标输入，将显示一次第一目标页面元素对应的资源信息，且每次显示资源信息针对的第一目标页面元素的数量可以相同或者不同。较佳地，每次显示资源信息针对的第一目标页面元素的数量可以与全部第一目标页面元素的数量相关。这里，可以设置一第一阈值数量，该第一阈值数量可以为第二数量或者其它值，在全部第一目标页面元素的数量大于或等于该第一阈值数量的情况下，每次显示资源信息针对的第一目标页面元素的数量均等于该第一阈值数量，也就是显示部分第一目标页面元素对应的资源信息。在全部第一目标页面元素的数量小于该第一阈值数量的情况下，将显示全部第一目标页面元素对应的资源信息。

在步骤103之后首次接收到用户的第一目标输入时，第一目标页面元素的数量可以为一个或者多个。在第一目标页面元素的数量为一个的情况下，将显示全部第一目标页面元素对应的资源信息。在第一目标页面元素的数量为多个的情况下，将显示全部或部分第一目标页面元素对应的资源信息。其中，针对显示部分第一目标页面元素对应的资源信息，可以理解为选择部分第一目标页面元素，仅显示被选择的第一目标页面元素对应的资源信息。

在本发明实施例中，在加载目标页面的情况下，将获取目标页面中第一数量的页面元素各自对应的资源信息，从而得到需要展示在目标页面中的资源信息。然后将得到的这些需要展示在目标页面中的资源信息全部加载至目标页面中，并将这些需要展示在目标页面中的部分资源信息显示出来。从而在接收到用户的第一目标输入之后，将直接展示已加载至目标页面的且未被显示过的资源信息。相比于预加载技术，本发明实施例首次加载资源信息时将获取到的资源信息全部加载到了目标页面，从而在需要展示剩余资源信息时，可以节省加载资源信息的流程，直接将已加载的资源信息显示出来。尤其针对占据较大空间的资源信息，可以将其快速的显示出来，从而缩短用户的等待时间，提升用户的使用体验。

可选地，在显示全部或部分第一目标页面元素对应的资源信息的情况下，该方法还包括：

监测第一目标页面元素的数量。

应当说明的是，第一目标页面元素为已被加载过资源信息的第一数量的页面元素中未曾显示过资源信息的页面元素。随着用户不断的进行第一目标输入，越来越多的第一目标页面元素对应的资源信息被显示。因此，第一目标页面元素的数量将逐渐减少。例如，当前第一目标页面元素的数量为6个，在接收到用户的第一目标输入的情况下，显示6个第一目标页面元素中的2个第一目标页面元素的资源信息，此时可以监测到第一目标页面元素的数量减少为4个。具体的，在每次响应于用户的第一目标输入，显示第一目标页面元素对应的资源信息之后，监测第一目标页面元素的数量。

在第一目标页面元素的数量小于或等于第一目标数量的情况下，获取第三数量的页面元素各自对应的资源信息，其中，第三数量的页面元素包括目标页面的所有页面元素中除第一数量的页面元素之外的部分或全部页面元素。

加载第三数量的页面元素各自对应的资源信息。

应当说明的是，若目标页面在显示第一数量的页面元素对应的资源信息之外，还需要显示目标页面中其他数量的页面元素对应的资源信息。可以在第一目标页面元素的数量小于或等于一阈值时，获取其他数量的页面元素对应的资源信息并将其他数量的页面元素对应的资源信息加载到目标页面，以便后续直接显示这部分页面资源对应的资源信息。其中，该阈值即为第一目标数量，其为辨别是否需要获取第三数量的页面元素对应的资源信息的目标值。具体的，可以根据需求自行设定第一目标数量的具体数值。例如，该第一目标数量可以设置为等于第一数量，从而在目标页面中显示第二数量的页面元素各自对应的资源信息之后，或者在显示全部或部分第一目标页面元素对应的资源信息之后，由于第一目标页面元素的数量小于该第一目标数量，将直接获取并加载第三数量的页面元素各自对应的资源信息。当然，第一目标数量还可以设置为小于第一数量的其他数值，例如可以设置为等于上述的第一阈值数量，但不限于此。在第一目标数量等于上述的第一阈值数量的情况下，可以在每次显示第一目标页面元素对应的资源信息时，显示上述的第一阈值数量的第一目标页面元素对应的资源信息。从而在剩余的第一目标页面元素的数量小于或等于上述的第一阈值数量情况下，获取并加载第三数量的页面元素各自对应的资源信息。进而可以在所有第一目标页面元素的资源信息均被显示之后，开始显示第三数量的页面元素各自对应的资源信息。

这里，加载第三数量的页面元素各自对应的资源信息的过程与前述步骤102中加载资源信息的过程类似，为避免重复，这里不再赘述。较佳地，第三数量与第一数量可以相等，也就是说可以将目标页面中的页面元素分为相同数量的多组，每次从服务器获取目标页面的页面元素的资源信息时，获取一组页面元素的资源信息。例如，目标页面中的页面元素的数量为30个，可以预先将其分为第一组、第二组以及第三组，其中每组包括互不重复的10个页面元素的资源信息。在获取第一数量的页面元素的资源信息时，可以获取第一组中页面元素的资源信息，在获取第三数量的页面元素的资源信息时，可以获取第二组中页面元素的资源信息。若需要从服务器再次获取页面元素的资源信息时，可以获取第三组中页面元素的资源信息。

在接收到用户在目标页面的第二目标输入且第一目标页面元素的数量小于预设数量的情况下，显示部分或者全部第二目标页面元素对应的资源信息，其中，第二目标页面元素为第三数量的页面元素中未显示过资源信息的页面元素。

应当说明的是，第二目标页面元素为第三数量的页面元素中未显示过资源信息的页面元素。也就是说，在第一数量的页面元素对应的资源信息已经全部显示完毕或者剩余未显示资源信息的页面元素的数量较小，例如小于上述的第一阈值数量的情况下，若接收到用户在目标页面的第二目标输入，显示部分或者全部第二目标页面元素对应的资源信息。其中，该预设数量其为辨别第一数量的页面元素对应的资源信息是否已经全部显示完毕或者剩余未显示资源信息的页面元素的数量是否较小，例如小于上述的第一阈值数量的目标值。具体的，可以根据需求自行设定预设数量的具体数值。例如，该预设数量可以设置为等于上述的第一阈值数量，从而在目标页面中显示第二数量的页面元素各自对应的资源信息之后，由于第一目标页面元素的数量小于该预设数量，在接收到用户的第二目标输入之后，将显示部分或者全部第二目标页面元素对应的资源信息，以实现显示上述的第一阈值数量或其它数值的页面元素对应的资源信息。当然，预设数量还可以设置为小于第一数量的其他数值，例如可以设置为等于上述的第一阈值数量，但不限于此。在预设数量等于上述的第一阈值数量的情况下，可以在每次显示第一目标页面元素对应的资源信息时，显示上述的第一阈值数量的第一目标页面元素对应的资源信息。从而在剩余的第一目标页面元素的数量小于或等于第二数量情况下，在显示剩余第一目标页面元素对应的资源信息的同时，显示部分或者全部第二目标页面元素对应的资源信息。

可以理解的是，每次接收到用户的第二目标输入，将显示一次第二目标页面元素对应的资源信息，且每次显示资源信息针对的第二目标页面元素的数量可以相同或者不同。较佳地，每次显示资源信息针对的第二目标页面元素的数量可以与全部第二目标页面元素的数量相关。这里，可以设置一第二阈值数量，在全部第二目标页面元素的数量大于或等于该第二阈值数量的情况下，每次显示资源信息针对的第二目标页面元素的数量均等于该第二阈值数量，也就是显示部分第二目标页面元素对应的资源信息。在全部第二目标页面元素的数量小于该第二阈值数量的情况下，将显示全部第二目标页面元素对应的资源信息。具体的，可以继续监测第二目标页面元素的数量，在第二目标页面元素的数量小于或等于第一目标数量的情况下，获取第四数量的页面元素各自对应的资源信息，然后按照本发明实施例中对第三数量的页面元素的处理方式对第四数量的页面元素进行处理，并以此类推直至用户不再输入或目标页面中全部的页面元素均已显示为止。其中，第二阈值数量与第一阈值数量可以相同或不同。

可以理解的是，在加载目标页面或目标页面加载资源信息的过程中，会生成DOM(文档对象模型，Document Object Model)树，DOM树包括多个DOM节点，并且每个页面元素对应着一个DOM节点。在每次从服务器获取的页面元素的数量相等的情况下，可以复用首次获取的第一数量的页面元素对应的DOM节点。

本发明实施例中，可以持续监测第一目标页面元素的数量，从而在第一目标页面元素的数量处于一合理的数值时，再次获取目标页面中剩余页面元素的资源信息。使得首次获取的第一数量的页面元素的资源信息展示完毕或者将要展示完毕时，可以尽快的将剩余页面元素的至少部分资源信息加载在目标页面中。

可选地，显示第一数量的页面元素中第二数量的页面元素各自对应的资源信息，包括：

在第一数量的页面元素中按照第一目标策略选择第二数量的页面元素。

本步骤中，由于只需在加载至目标页面的第一数量的页面元素中选择部分页面元素对应的资源信息进行显示，因此，这里预先设置第一目标策略，用于选择当前需要显示资源信息的页面元素，即第二数量的页面元素。其中，第一目标策略可以为任意选择规则，例如可以为按照页面元素对应的资源信息的数据量从大到小的顺序进行选择，也可以为按照页面元素的资源信息在目标页面中加载完成的时间从早到晚的顺序等。

将第二数量的页面元素的目标属性的属性值均调整为用于显示页面元素的第一属性值。

本步骤中，可以调整目标页面对应的层叠样式表(Cascading Style Sheets，简称CSS)文件中的目标属性，将第二数量的页面元素的目标属性的属性值设置为第一属性值。其中，目标属性可以为CSS文件中的display属性、visibility属性、opacity属性等。以display属性为例进行说明，在目标属性为display属性的情况下，第一属性值可以为block、inline等不影响页面元素显示的属性值。若目标属性为visibility属性，则第一属性值为visible。

将剩余页面元素的目标属性的属性值均调整为用于隐藏页面元素的第二属性值，其中，剩余页面元素为第一数量的页面元素中除第二数量的页面元素之外的页面元素。

本步骤中，同样可以调整目标页面对应的CSS文件中的目标属性，将剩余页面元素的目标属性的属性值设置为第二属性值。其中，关于目标属性，这里不再赘述。在目标属性为display属性的情况下，第二属性值可以为none。若目标属性为visibility属性，则第二属性值为hidden。

本发明实施例中，可以利用CSS文件中的目标属性控制页面元素的隐藏和显示，进而控制资源信息的隐藏和显示。

可选地，显示部分第一目标页面元素对应的资源信息，包括：

在全部第一目标页面元素中按照第二目标策略选择部分第一目标页面元素。

本步骤中，由于只需在全部第一目标页面元素中选择部分第一目标页面元素对应的资源信息进行显示，因此，这里预先设置第二目标策略，用于选择当前需要显示资源信息的第一目标页面元素。其中，第二目标策略可以为任意选择规则，其与第一目标策略类似，这里不再赘述。

将部分第一目标页面元素的目标属性的属性值均调整为用于显示页面元素的第一属性值，以及将第一目标页面元素中剩余页面元素的目标属性的属性值均调整为用于隐藏页面元素的第二属性值。

应当说明的是，可以调整目标页面对应的CSS文件中的目标属性，对相应的第一目标页面元素的目标属性的属性值进行调整。其中，关于目标属性、第一属性值以及第二属性值可以参照前述发明实施例，这里不再赘述。

本发明实施例中，可以利用CSS文件中的目标属性控制第一目标页面元素的隐藏和显示，进而控制资源信息的隐藏和显示。

可选地，第一数量的页面元素可以为相同类型的HTML标签构成的页面元素、和/或对应的资源信息大于或等于预设值的页面元素。

应当说明的是，相同类型的HTML标签可以为任意类型的HTML标签。可以理解的是，在加载目标页面的情况下，还将获取目标HTML标签构成的页面元素对应的资源信息，其中，目标HTML标签为与第一数量的页面元素的HTML标签不同的HTML标签。例如，通常目标页面中将存在大量具有不同HTML标签的页面元素，从而在目标页面中加载各页面元素对应的资源信息之后，使得目标页面中可以显示各种文字、图片、视频、超链接等。

本发明实施例中，第一数量的页面元素可以为相同类型的HTML标签构成的页面元素、和/或对应的资源信息大于或等于预设值的页面元素，从而可以满足大量具有相同类型的HTML标签的页面元素、和/或对应的资源信息大于或等于预设值的页面元素的快速显示需求。其中，预设值可以为任意设置的值，资源信息大于或等于预设值指示资源信息占据的空间较大。

可选地，相同类型的HTML标签可以包括iframe标签。

应当说明的是，iframe标签为HTML标签中的一种，又叫内联框架标签。通常iframe标签构成的iframe元素对应的资源信息占据的空间较大，加载所需时间也较长。

本发明实施例中，可以针对iframe标签构成的页面元素，首次加载iframe资源信息时将获取到的iframe资源信息全部加载到了目标页面，从而在需要展示剩余iframe资源信息时，可以将其快速的显示出来，从而缩短用户的等待时间，提升用户的使用体验。

可选地，在获取多个页面元素对应的资源信息时，可以采用异步下载的方式同时对每一页面元素对应的资源信息进行下载。当然在对多个页面元素对应的资源信息进行加载时，也可以采用异步加载的方式同时对每一页面元素对应的资源信息进行加载。

本发明实施例中，通过异步下载和异步加载的方式，可以同时对不同页面元素进行操作，提升了操作效率。

参见图2，为本发明实施例提供的加载页面资源的方法的实际应用流程图，以浏览器中网页为例，包括：

步骤201：进入网页，在终端设备中启动浏览器之后，通过浏览器打开目标网页。

步骤202：浏览器基于当前打开的目标网页向后台服务器发送请求数据，请求目标网页加载所需的资源信息。这里，可以假定目标网页中涉及大量页面元素，其中就包括多个iframe元素，以30个iframe元素为例。针对iframe元素，本次可以仅请求10个iframe元素对应的资源信息。

步骤203：展示当前操作的数据。浏览器在接收到资源信息之后，将所有的资源信息都加载至目标页面。同样，针对iframe元素，将前10个iframe元素对应的资源信息全部加载至目标页面，然后仅显示其中一个，将第一个iframe元素对应的资源信息显示在目标页面，剩余9个iframe元素对应的资源信息处于隐藏状态。具体的，可以通过CSS文件的属性实现资源信息的隐藏和显示。

步骤204：操作数据，用户针对当前显示的第一个iframe元素对应的资源信息进行操作。

步骤205：判断是否触发预加载，若是则执行步骤202，获取中间10个iframe元素对应的资源信息并将获取的资源信息全部加载至目标页面，重复执行步骤203、步骤204、步骤205；若否则执行步骤206。其中，触发预加载的条件可以为获取的iframe元素中未显示过资源信息的iframe元素的数量达到2个。

在本步骤中，用户操作已经展示的数据，当需要切换剩余已经渲染但未展示的数据时，通过CSS的属性将该未展示的数据的CSS的属性值调整成用于显示的第二属性值。

步骤206：结束操作，即判断未显示过资源信息的iframe元素的数量是否为零个，若是则执行步骤207，若否则继续执行步骤204，直至30个iframe元素对应的资源信息展示完毕。若用户在步骤204中操作的是第一个iframe元素对应的资源信息，则在步骤206后，将直接显示第二个iframe元素对应的资源信息供用户操作。

步骤207：基于用户输入的关闭操作关闭网页。

在本发明实施例中，在浏览器加载页面资源的场景下，将加载页面资源的方法与预加载相结合，进一步缩短了用户的等待时间，提升了用户的使用体验。

以上介绍了本发明实施例提供的加载页面资源的方法，下面将结合附图介绍本发明实施例提供的加载页面资源的装置。

参见图3，本发明实施例还提供了一种加载页面资源的装置，该装置包括：

第一获取模块31，用于在加载目标页面的情况下，获取目标页面中第一数量的页面元素各自对应的资源信息；

第一加载模块31，用于加载第一数量的页面元素各自对应的资源信息；

第一显示模块33，用于显示第一数量的页面元素中第二数量的页面元素各自对应的资源信息，其中，第二数量的数值小于第一数量的数值；

第二显示模块34，用于在接收到用户的第一目标输入的情况下，显示全部或部分第一目标页面元素对应的资源信息，其中，第一目标页面元素为第一数量的页面元素中未显示过资源信息的页面元素。

可选地，该装置还包括：

监测模块，用于在显示全部或部分第一目标页面元素对应的资源信息的情况下，监测第一目标页面元素的数量；

第二获取模块，用于在第一目标页面元素的数量小于或等于第一目标数量的情况下，获取第三数量的页面元素各自对应的资源信息，其中，第三数量的页面元素包括目标页面的所有页面元素中除第一数量的页面元素之外的部分或全部页面元素；

第二加载模块，用于加载第三数量的页面元素各自对应的资源信息；

第三显示模块，用于在接收到用户在所述目标页面的第二目标输入且所述第一目标页面元素的数量小于预设数量的情况下，显示部分或者全部第二目标页面元素对应的资源信息，其中，所述第二目标页面元素为所述第三数量的页面元素中未显示过资源信息的页面元素。

可选地，所述第一显示模块33，包括：

第一选择单元，用于在所述第一数量的页面元素中按照第一目标策略选择第二数量的页面元素；

第一属性调整单元，用于将所述第二数量的页面元素的目标属性的属性值均调整为用于显示页面元素的第一属性值；

第二属性调整单元，用于将剩余页面元素的目标属性的属性值均调整为用于隐藏页面元素的第二属性值，其中，所述剩余页面元素为所述第一数量的页面元素中除所述第二数量的页面元素之外的页面元素。

可选地，所述第二显示模块34，包括：

第二选择单元，用于在全部所述第一目标页面元素中按照第二目标策略选择部分第一目标页面元素；

第三属性调整单元，用于将所述部分第一目标页面元素的目标属性的属性值均调整为用于显示页面元素的第一属性值，以及将所述第一目标页面元素中剩余页面元素的目标属性的属性值均调整为用于隐藏页面元素的第二属性值。

可选地，所述第一数量的页面元素为相同类型的超文本标记语言标签构成的页面元素、和/或对应的资源信息大于或等于预设值的页面元素。

可选地，所述相同类型的超文本标记语言标签包括iframe标签。

本发明实施例提供的加载页面资源的装置能够实现图1至图2的方法实施例中加载页面资源的方法实现的各个过程，为避免重复，这里不再赘述。

本发明的实施例中，在加载目标页面的情况下，将获取目标页面中第一数量的页面元素各自对应的资源信息，从而得到需要展示在目标页面中的资源信息。然后将得到的这些需要展示在目标页面中的资源信息全部加载至目标页面中，并将这些需要展示在目标页面中的部分资源信息显示出来。从而在接收到用户的第一目标输入之后，将直接展示已加载至目标页面的且未被显示过的资源信息。相比于预加载技术，本发明实施例首次加载资源信息时将获取到的资源信息全部加载到了目标页面，从而在需要展示剩余资源信息时，可以节省加载资源信息的流程，直接将已加载的资源信息显示出来。尤其针对占据较大空间的资源信息，可以将其快速的显示出来，从而缩短用户的等待时间，提升用户的使用体验。

另一方面，本发明实施例还提供了一种电子设备，包括存储器、处理器、总线以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述加载页面资源的方法中的步骤。

举个例子如下，图4示出了一种电子设备的实体结构示意图。

如图4所示，该电子设备可以包括：处理器(processor)410、通信接口(Communications Interface)420、存储器(memory)430和通信总线440，其中，处理器410，通信接口420，存储器430通过通信总线440完成相互间的通信。处理器410可以调用存储器430中的逻辑指令，以执行如下方法：

在加载目标页面的情况下，获取所述目标页面中第一数量的页面元素各自对应的资源信息；

加载所述第一数量的页面元素各自对应的资源信息；

显示所述第一数量的页面元素中第二数量的页面元素各自对应的资源信息，其中，所述第二数量的数值小于所述第一数量的数值；

在接收到用户的第一目标输入的情况下，显示全部或部分第一目标页面元素对应的资源信息，其中，所述第一目标页面元素为所述第一数量的页面元素中未显示过资源信息的页面元素。

此外，上述的存储器430中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

再一方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各实施例提供的加载页面资源的方法，例如包括：

在加载目标页面的情况下，获取所述目标页面中第一数量的页面元素各自对应的资源信息；

加载所述第一数量的页面元素各自对应的资源信息；

显示所述第一数量的页面元素中第二数量的页面元素各自对应的资源信息，其中，所述第二数量的数值小于所述第一数量的数值；

在接收到用户的第一目标输入的情况下，显示全部或部分第一目标页面元素对应的资源信息，其中，所述第一目标页面元素为所述第一数量的页面元素中未显示过资源信息的页面元素。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种加载页面资源的方法，其特征在于，所述方法包括：

在加载目标页面的情况下，获取所述目标页面中第一数量的页面元素各自对应的资源信息；

加载所述第一数量的页面元素各自对应的资源信息；

显示所述第一数量的页面元素中第二数量的页面元素各自对应的资源信息，其中，所述第二数量的数值小于所述第一数量的数值；

在接收到用户的第一目标输入的情况下，显示全部或部分第一目标页面元素对应的资源信息，其中，所述第一目标页面元素为所述第一数量的页面元素中未显示过资源信息的页面元素。

2.根据权利要求1所述的方法，其特征在于，在显示全部或部分第一目标页面元素对应的资源信息的情况下，所述方法还包括：

监测所述第一目标页面元素的数量；

在所述第一目标页面元素的数量小于或等于第一目标数量的情况下，获取第三数量的页面元素各自对应的资源信息，其中，所述第三数量的页面元素包括所述目标页面的所有页面元素中除所述第一数量的页面元素之外的部分或全部页面元素；

加载所述第三数量的页面元素各自对应的资源信息；

在接收到用户在所述目标页面的第二目标输入且所述第一目标页面元素的数量小于预设数量的情况下，显示部分或者全部第二目标页面元素对应的资源信息，其中，所述第二目标页面元素为所述第三数量的页面元素中未显示过资源信息的页面元素。

3.根据权利要求1所述的方法，其特征在于，所述显示所述第一数量的页面元素中第二数量的页面元素各自对应的资源信息，包括：

在所述第一数量的页面元素中按照第一目标策略选择第二数量的页面元素；

将所述第二数量的页面元素的目标属性的属性值均调整为用于显示页面元素的第一属性值；

将剩余页面元素的目标属性的属性值均调整为用于隐藏页面元素的第二属性值，其中，所述剩余页面元素为所述第一数量的页面元素中除所述第二数量的页面元素之外的页面元素。

4.根据权利要求1所述的方法，其特征在于，所述显示部分第一目标页面元素对应的资源信息，包括：

在全部所述第一目标页面元素中按照第二目标策略选择部分第一目标页面元素；

将所述部分第一目标页面元素的目标属性的属性值均调整为用于显示页面元素的第一属性值，以及将所述第一目标页面元素中剩余页面元素的目标属性的属性值均调整为用于隐藏页面元素的第二属性值。

5.根据权利要求1所述的方法，其特征在于，所述第一数量的页面元素为相同类型的超文本标记语言标签构成的页面元素、和/或对应的资源信息大于或等于预设值的页面元素。

6.根据权利要求5所述的方法，其特征在于，所述相同类型的超文本标记语言标签包括内联框架iframe标签。

7.一种加载页面资源的装置，其特征在于，所述装置包括：

第一获取模块，用于在加载目标页面的情况下，获取所述目标页面中第一数量的页面元素各自对应的资源信息；

第一加载模块，用于加载所述第一数量的页面元素各自对应的资源信息；

第一显示模块，用于显示所述第一数量的页面元素中第二数量的页面元素各自对应的资源信息，其中，所述第二数量的数值小于所述第一数量的数值；

第二显示模块，用于在接收到用户的第一目标输入的情况下，显示全部或部分第一目标页面元素对应的资源信息，其中，所述第一目标页面元素为所述第一数量的页面元素中未显示过资源信息的页面元素。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

监测模块，用于在显示全部或部分第一目标页面元素对应的资源信息的情况下，监测所述第一目标页面元素的数量；

第二获取模块，用于在所述第一目标页面元素的数量小于或等于第一目标数量的情况下，获取第三数量的页面元素各自对应的资源信息，其中，所述第三数量的页面元素包括所述目标页面的所有页面元素中除所述第一数量的页面元素之外的部分或全部页面元素；

第二加载模块，用于加载所述第三数量的页面元素各自对应的资源信息；

第三显示模块，用于在接收到用户在所述目标页面的第二目标输入且所述第一目标页面元素的数量小于预设数量的情况下，显示部分或者全部第二目标页面元素对应的资源信息，其中，所述第二目标页面元素为所述第三数量的页面元素中未显示过资源信息的页面元素。

9.一种电子设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述计算机程序被所述处理器执行时实现如权利要求1至6中任一项所述的加载页面资源的方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如权利要求1-6中任意一项所述的加载页面资源的方法的步骤。

Images