CN107818008B - 页面加载方法及装置 - Google Patents

Abstract

本发明涉及互联网技术领域，具体涉及一种页面加载方法及装置，该页面加载方法及装置应用于移动终端，该页面加载方法包括：调用预定义的至少一个占位标签为页面上的待显示元素进行占位，从与移动终端连接的服务终端获取待显示元素，将获取的待显示元素显示于所述占位标签所在的位置。本方案通过定义多个占位标签，并使用定义的多个占位标签为待显示元素进行占位，使得移动终端在能够实际获取待显示元素前不必加载其他的占位图片或预览视图等，减少了移动终端系统对页面的渲染，提高了页面加载速度。

Description

页面加载方法及装置

技术领域

本发明涉及互联网技术领域，具体而言，涉及一种页面加载方法及装置。

背景技术

在Android的开发过程中通常都会涉及到界面元素的相关的功能，在网络环境不好的情况下，用户通过移动终端刷新页面时，并不是一打开所有的页面都会被完全地显示出来，此时，在现有技术中，会使用一个占位图片或是可见的默认预览视图(如不断转圈的视图)来过度，以告知用户系统正在获取网络内容。但是，无论是占位图片还是默认预览视图都是可见的，将导致整个页面被打开的时候，系统将耗费更多的性能去渲染所有的占位图片或默认预览视图，从而加重了页面渲染的工作量，进而导致页面加载速度变慢。

发明内容

本发明的目的在于提供一种页面加载方法，以提高页面加载速度。

本发明的另一目的在于提供一种页面加载装置，以提高页面加载速度。

为了实现上述目的，本发明实施例采用的技术方案如下：

第一方面，本发明实施例提供了一种页面加载方法，应用于移动终端，所述方法包括：调用预定义的至少一个占位标签为页面上的待显示元素进行占位；从与移动终端连接的服务终端获取待显示元素；将获取的待显示元素显示于所述占位标签所在的位置。

第二方面，本发明实施例还提供了一种页面加载装置，应用于移动终端，所述装置包括：调用模块，用于调用预定义的至少一个占位标签为页面上的待显示元素进行占位；获取模块，用于从与移动终端连接的服务终端获取待显示元素；显示模块，用于将获取的待显示元素显示于所述占位标签所在的位置。

本发明实施例提供的一种页面加载方法及装置，该页面加载方法及装置应用于移动终端，该页面加载方法包括：调用预定义的至少一个占位标签为页面上的待显示元素进行占位，从与移动终端连接的服务终端获取待显示元素，将获取的待显示元素显示于所述占位标签所在的位置。本方案通过定义多个占位标签，并使用定义的多个占位标签为待显示元素进行占位，使得移动终端在能够实际获取待显示元素前不必加载其他的占位图片或预览视图等，减少了移动终端系统对页面的渲染，提高了页面加载速度。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本发明实施例提供的一种移动终端的结构示意图。

图2示出了本发明实施例提供的一种页面加载方法的流程示意图。

图3示出了本发明实施例提供的一种页面加载方法的子步骤的流程示意图。

图4示出了本发明实施例提供的一种页面加载方法的另一子步骤的流程示意图。

图5示出了本发明实施例提供的一种页面加载装置的功能模块示意图。

图示：100-移动终端；110-页面加载装置；120-存储器；130-存储控制器；140-处理器；150-外设接口；160-输入输出单元；170-音频单元；180-显示单元；190-通信单元；111-定义模块；112-调用模块；113-配置模块；114-获取模块；115-显示模块。

具体实施方式

下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本发明的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在网络环境不好的情况下，用户使用手机等移动电子设备时，往往不能及时刷出页面信息，此时用户使用的移动电子设备的页面上将会成呈现一个占位图片，通过该占位图片以告知因网络原因正努力获取页面内容，使得用户了解当前页面内容获取进度，如该占位图片为“不断转圈的标识”或相应应用的标志(京东的金属狗)。容易理解的，该占位图片还可以是页面的布局框架，即当网络不好时，用户不能及时查看到需要获取的页面内容，只能看到该页面的布局框架，但是布局框架中具体内容由于网络原因，导致用户暂时不能查看。由此可见，现有技术中，在用户实际获取页面内容前，移动电子设备将对大量占位图片进行渲染，从而加重了移动电子设备页面渲染的工作量，进而拖慢了移动电子设备加载用户真正需要的页面内容的进程。

因此，本发明实施例提供一种页面加载方法，该页面加载方法应用于移动终端，该移动终端可以是，但不限于，手机、平板电脑等移动电子设备，进一步地，本发明实施例提供的一种页面加载方法应用于移动终端的Android系统中。在本方案中，通过占位标签为待显示元素进行占位，以减少移动终端对占位图片的渲染，进而加快移动终端加载用户需要的页面内容的目的，即加快移动终端的页面加载速度。

请参照图1，是本发明实施例提供的一种移动终端100的结构示意图，该移动终端包括页面加载装置110、存储器120、存储控制器130、处理器140、外设接口150、输入输出单元160、音频单元170、显示单元180以及通信单元190。

所述存储器120、存储控制器130、处理器140、外设接口150、输入输出单元160、音频单元170、显示单元180、通信单元190各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述页面加载装置110包括至少一个可以软件或固件(firmware)的形式存储于所述存储器120中或固化在所述移动终端100设备的操作系统(operating system，OS)中的软件功能模块。所述处理器140用于执行存储器120中存储的可执行模块，例如所述页面加载装置110包括的软件功能模块或计算机程序。

其中，存储器120可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。其中，存储器120用于存储程序，所述处理器140在接收到执行指令后，执行所述程序，后续本发明实施例任一实施例揭示的过程定义的移动终端100所执行的方法可以应用于处理器140中，或者由处理器140实现。

处理器140可能是一种集成电路芯片，具有信号的处理能力。上述的处理器140可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器140也可以是任何常规的处理器140等。

所述外设接口150将各种输入/输出装置耦合至处理器140以及存储器120。在一些实施例中，外设接口150，处理器140以及存储控制器130可以在单个芯片中实现。在其他一些实例中，他们可以分别由独立的芯片实现。

输入输出单元160用于提供给用户输入数据实现用户与移动终端100的交互。所述输入输出单元160可以是，但不限于，鼠标和键盘等。

音频单元170向用户提供音频接口，其可包括一个或多个麦克风、一个或者多个扬声器以及音频电路。

显示单元180在移动终端100与用户之间提供一个交互界面(例如用户操作界面)或用于显示图像数据给用户参考。在本实施例中，所述显示单元180可以是液晶显示器或触控显示器。若为触控显示器，其可为支持单点和多点触控操作的电容式触控屏或电阻式触控屏等。支持单点和多点触控操作是指触控显示器能感应到来自该触控显示器上一个或多个位置处同时产生的触控操作，并将该感应到的触控操作交由处理器140进行计算和处理。

所述通信单元190用于通过所述网络与服务终端之间建立连接，从而实现所述移动终端100与服务终端之间的通信连接，并用于通过网络收发数据。

请参照图2，是本发明实施例提供的一种页面加载方法的流程示意图，该页面加载方法包括：

在本发明实施例中，定义的占位标签为<View>，该占位标签<View>可用于表示页面上的所有元素。换句话说，<View>可以理解为控件，页面上元素也是一个控件，如图片是一个控件或按钮是一个控件，则页面上的所有元素均可以通过<View>占位标签进行占位。需要说明的是，也可以根据页面上元素的属性使用对应的标签进行占位，如页面上的元素为按钮，则可通过<button>进行占位。进一步地，在现有技术中，在用户实际获取页面上所有元素之前，用户将需等待一小段时间以便于移动终端通过网络获取页面内容显示于用户，在此段时间内，移动终端将显示占位图片。在本方案中，由于事先通过<View>对页面上的所有元素进行布局占位，则用户在看到实际需要的页面内容前，将不能看到其他内容(如占位图片)，即移动终端内没有占位图片，亦即不需要对占位图片进行渲染并显示。

步骤S110，定义每个所述占位标签的宽高为与所述待显示元素的宽高一致，以便于所述占位标签所占的位置能容纳待显示元素。

该待显示元素为将显示于移动终端的页面上的元素，即移动终端与服务终端连接后，从服务终端获取的页面内容。在使用占位标签<View>为页面上待显示元素进行占位后，还需进一步设置占位标签<View>的宽高，容易理解的，该占位标签<View>的宽高可固定地设置为与对应的待显示元素的宽高一致，以便于该占位标签<View>所占的位置能够容纳待显示元素。

该占位标签<View>的宽高的另一种设置方式为：

步骤S120，定义每个所述占位标签的宽高为包裹属性，以根据所述待显示元素的大小动态调整所述占位标签所占位置的大小。

即将占位标签<View>的宽高设置为包裹属性wrap_content，通过将该占位标签<View>设置为包裹属性，则该占位标签可根据显示的元素的大小动态调整所占的位置大小，以使得能容纳对应的元素。

步骤S130，调用预定义的至少一个占位标签为页面上的待显示元素进行占位。

对占位标签<View>设置好基本属性，如宽高等，则需根据页面元素的数量调用多个占位标签<View>为待显示元素进行占位。需要说明的是，该占位标签<View>将按照待显示元素的布局进行布局。

步骤S140，配置所述占位标签的可见属性为第一属性，以使所述占位标签对用户不可见。

将每一个占位标签<View>的可见属性设置为Gone，即第一属性为Gone，以使占位标签对用户不可见，即用户在等待需要的页面内容时，将不能看到用于占位的占位标签<View>。需要说明的是，不可见的属性包括Gone和Invisible两种，在本发明实施例中，选取Gone属性。之所以选取Gone属性，具体理由为：Invisible意为不可见，若将占位标签的属性设置为Invisible，该移动终端的系统仍会将该占位标签加载到内存且会测量该占位标签的宽高信息，即是说，移动终端的内存仍会对设置为Invisible属性的占位标签进行渲染，只是对于用户仍然呈现一种不可见的状态。对于Gone属性，移动终端的系统不会对其加载，也不会对其进行宽高的测量，换句话说，移动终端的系统不会对设置为Gone属性的占位标签进行渲染，以此更好地减少了移动终端系统的消耗。

步骤S150，从与移动终端连接的服务终端获取待显示元素。

该待显示元素为页面上需显示的内容，由移动终端连网后从服务终端获取，该服务终端可以是，但不限于，单一的服务器或服务器集群。

步骤S160，将获取的待显示元素显示于所述占位标签所在的位置。

该占位标签用于为待显示元素进行占位，故获取待显示元素后需将待显示元素显示于对应的占位标签所在的位置。在本发明实施例中，将待显示元素显示于占位标签所在位置的方式有两种，具体为：

第一种

请参照图3，是本发明实施例提供的一种页面加载方法的步骤S160的子步骤的流程示意图，该步骤S160包括：

步骤S161，将待显示元素添加到所述占位标签所占的位置。

直接将获取的待显示元素(如图片)添加到占位标签所占的位置。

步骤S162，配置所述占位标签的可见属性为第二属性，以使所述待显示元素对用户可见。

由于是直接将获取的待显示元素添加到占位标签所占的位置，且最开始时将占位标签的属性设置为了Gone属性，即不可见，则占位标签对于用户而言是不可见的。若待显示元素所在图层位于占位标签所在图层之下，则待显示元素将无法显示于用户，因此，在将待显示元素添加到占位标签所占的位置之后，需调用setViisiable(visiable)函数将占位标签设置为可见的状态，以便于待显示元素一定能显示于用户查看。

第二种

请参照图4，是本发明实施例提供的一种页面加载方法的步骤S160的另一子步骤的流程示意图，该步骤S160包括：

步骤S163，删除所述占位标签。

通过<View>的remove方法将占位标签删除。

步骤S164，将待显示元素添加到所述占位标签所占位的位置。

通过addview方法将待显示元素添加到占位标签所占位的位置，从而实现了将获取的待显示元素显示于占位标签所占的位置的目的。

最后，在待显示元素全部加载完毕后，通过invalidate方法刷新整个页面，以确保所有内容能快速被显示出来。

由此可见，本方案通过定义占位标签并调用占位标签对待显示元素进行占位，再获取待显示元素并将待显示元素显示于占位标签所占的位置，以完成页面加载。由于是使用占位标签对待显示元素进行占位，使得系统不用在获取到页面内容前额外加载占位图片，以提高了页面的加载速度，优化了系统性能。

最后需要说明的是，当用户不需要当前页面时，即当用户关闭当前页面或用户上滑当前页面等类似情况，该移动终端的内部系统将还原当前页面。具体还原过程为：通过<View>中的removeView方法将已经显示的元素(如图片)进行删除，然后调用addView方法添加一个新控件<View>为下一个新添加的待显示元素进行占位，并将该控件<View>的属性设置为Gone属性。在处理完毕后，调用invalidate方法对整个页面进行刷新，以完成整个页面的还原，并为下一次加载新的页面元素做准备。

请参照图5，是本发明实施例提供的一种页面加载装置110的功能模块示意图，该页面加载装置110应用于移动终端100，该页面加载装置110包括定义模块111、调用模块112、配置模块113、获取模块114以及显示模块115，其中，

定义模块111，用于定义每个所述占位标签的宽高为包裹属性，以根据所述待显示元素的大小动态调整所述占位标签所占位置的大小；或

定义每个所述占位标签的宽高为与所述待显示元素的宽高一致，以便于所述占位标签所占的位置能容纳待显示元素。

在本发明实施例中，步骤S110和步骤S120可以由定义模块111执行。

调用模块112，用于调用预定义的至少一个占位标签为页面上的待显示元素进行占位。

在本发明实施例中，步骤S130可以由调用模块112执行。

配置模块113，用于配置所述占位标签的可见属性为第一属性，以使所述占位标签对用户不可见。

在本发明实施例中，步骤S140可以由配置模块113执行。

获取模块114，用于从与移动终端连接的服务终端获取待显示元素。

在本发明实施例中，步骤S150可以由获取模块114执行。

显示模块115，用于将获取的待显示元素显示于所述占位标签所在的位置。

在本发明实施例中，步骤S160～S164可以由显示模块115执行。

由于在页面加载方法部分已经详细描述，在此不再赘述。

本发明实施还揭示了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器140执行时实现前述本发明实施例揭示的页面加载方法。

综上所述，本发明实施例提供的一种页面加载方法及装置，该页面加载方法及装置应用于移动终端，该页面加载方法包括：调用预定义的至少一个占位标签为页面上的待显示元素进行占位，从与移动终端连接的服务终端获取待显示元素，将获取的待显示元素显示于所述占位标签所在的位置。本方案通过定义多个占位标签，并使用定义的多个占位标签为待显示元素进行占位，使得移动终端在能够实际获取待显示元素前不必加载其他的占位图片或预览视图等，减少了移动终端系统对页面的渲染，提高了页面加载速度。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (8)

1.一种页面加载方法，应用于移动终端，其特征在于，所述方法包括：

调用预定义的至少一个占位标签为页面上的待显示元素进行占位；

配置所述占位标签的可见属性为第一属性，以使所述占位标签对用户不可见；其中，所述移动终端不对配置为所述第一属性的占位标签进行加载和渲染；

从与移动终端连接的服务终端获取待显示元素；

将获取的待显示元素显示于所述占位标签所在的位置。

2.如权利要求1所述的页面加载方法，其特征在于，所述将获取的待显示元素显示于所述占位标签所在的位置的步骤包括：

将待显示元素添加到所述占位标签所占的位置；

配置所述占位标签的可见属性为第二属性，以使所述待显示元素对用户可见。

3.如权利要求1所述的页面加载方法，其特征在于，所述将获取的待显示元素显示于所述占位标签所在的位置的步骤包括：

删除所述占位标签；

将待显示元素添加到所述占位标签所占位的位置。

4.如权利要求1所述的页面加载方法，其特征在于，所述方法还包括：

定义每个所述占位标签的宽高为包裹属性，以根据所述待显示元素的大小动态调整所述占位标签所占位置的大小；或

定义每个所述占位标签的宽高为与所述待显示元素的宽高一致，以便于所述占位标签所占的位置能容纳待显示元素。

5.一种页面加载装置，应用于移动终端，其特征在于，所述装置包括：

调用模块，用于调用预定义的至少一个占位标签为页面上的待显示元素进行占位；

配置模块，用于配置所述占位标签的可见属性为第一属性，以使所述占位标签对用户不可见；其中，所述移动终端不对配置为所述第一属性的占位标签进行加载和渲染；

获取模块，用于从与移动终端连接的服务终端获取待显示元素；

显示模块，用于将获取的待显示元素显示于所述占位标签所在的位置。

6.如权利要求5所述的页面加载装置，其特征在于，所述显示模块还用于：

将待显示元素添加到所述占位标签所占的位置；

配置所述占位标签的可见属性为第二属性，以使所述待显示元素对用户可见。

7.如权利要求5所述的页面加载装置，其特征在于，所述显示模块还用于：

删除所述占位标签；

将待显示元素添加到所述占位标签所占位的位置。

8.如权利要求5所述的页面加载装置，其特征在于，所述装置还包括：

定义模块，用于定义每个所述占位标签的宽高为包裹属性，以根据所述待显示元素的大小动态调整所述占位标签所占位置的大小；或

定义每个所述占位标签的宽高为与所述待显示元素的宽高一致，以便于所述占位标签所占的位置能容纳待显示元素。

Images