CN104063424B - 网页图片的展现方法和展现装置 - Google Patents

Abstract

本公开是关于网页图片的展现方法和展现装置，该展现方法包括：调用具有相同特征的子图片；将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位置信息发送至所述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应位置。本公开的技术方案可以减少网页在首次加载时发起的图片获取请求的数量，避免消耗过多的网络资源，且有助于提高网页的加载速度。

Description

网页图片的展现方法和展现装置

技术领域

本公开涉及浏览器技术领域，尤其涉及网页图片的展现方法和展现装置。

背景技术

浏览器在向服务器请求到相应的网页文件后，通过加载该网页文件来实现网页的渲染和加载。为了提高网页的加载速度，尤其是当网页包含的图片量较大时，相关技术中提出了通过单独请求和下载网页图片的方式，实现了对网页的分步加载。

然而，随着单一网页的功能越来越复杂，使得在同一网页上显示的图片元素越来越多，则即便采用上述的分步加载方式，该网页在首次加载时仍需要发起与图片元素的数量相等次数的图片获取请求，将导致网络资源的大量消耗，且限制了网页的加载速度。

发明内容

本公开提供网页图片的展现方法和展现装置，以解决相关技术中网页在首次加载时需要发起与图片元素的数量相等次数的图片获取请求，将导致网络资源的大量消耗，且限制了网页的加载速度的问题。

根据本公开实施例的第一方面，提供一种网页图片的展现方法，包括：

调用具有相同特征的子图片；

将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；

当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位置信息发送至所述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应位置。

可选的，将所述具有相同特征的子图片生成一张整合图片，包括：

确定用于对所述子图片进行整合的整合方式；

从所述整合方式中选择对所述子图片进行整合后占用面积最小的整合方式；

按照所述占用面积最小的整合方式将所述具有相同特征的子图片生成所述整合图片。

可选的，确定用于对所述子图片进行整合的整合方式包括：

判断所述子图片的数量是否小于预设数量；

当所述子图片的数量小于预设数量时，通过穷举方式确定所述多种整合方式；以及

当所述子图片的数量大于或等于所述预设数量时，通过贪心策略确定所述多种整合方式。

可选的，将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息，包括：

将所述多张图片上传至整合服务器；

接收所述整合服务器返回的所述整合图片和每张子图片的位置信息。

可选的，还包括：

判断所述具有相同特征的子图片与所述整合图片中包含的子图片是否匹配；

若不匹配，则更新所述整合图片和所述位置信息。

根据本公开实施例的第二方面，提供一种网页图片的展现方法，包括：

向服务器发送网页图片获取请求；

接收所述服务器返回的由具有相同特征的子图片生成的整合图片，以及所述子图片的位置信息；

根据所述位置信息将每张子图片呈现在网页的相应位置。

可选的，根据所述位置信息将每张子图片呈现在网页的相应位置包括：

根据所述位置信息从所述整合图片中获取每张子图片；

将获取的每张子图片显示在网页的相应位置。

根据本公开实施例的第三方面，提供一种网页图片的展现装置，包括：

调用单元，用于调用具有相同特征的子图片；

处理单元，用于将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；

传输单元，用于当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位置信息发送至所述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应位置。

可选的，所述处理单元包括：

确定子单元，用于确定用于对所述子图片进行整合的整合方式；

选择子单元，用于从所述整合方式中选择对所述子图片进行整合后占用面积最小的整合方式；

生成子单元，用于按照所述占用面积最小的整合方式将所述具有相同特征的子图片生成为所述整合图片。

可选的，所述确定子单元包括：

数量判断模块，用于判断所述子图片的数量是否小于预设数量；

策略确定模块，用于在所述子图片的数量小于预设数量的情况下，通过穷举方式确定所述多种整合方式；以及，在所述子图片的数量大于或等于所述预设数量的情况下，通过贪心策略确定所述多种整合方式。

可选的，所述处理单元包括：

上传子单元，用于将所述多张图片上传至整合服务器；

接收子单元，用于接收所述整合服务器返回的所述整合图片和每张子图片的位置信息。

可选的，还包括：

判断单元，用于判断所述具有相同特征的子图片与所述整合图片中包含的子图片是否匹配；

更新单元，用于在不匹配的情况下，更新所述整合图片和所述位置信息。

根据本公开实施例的第四方面，提供一种网页图片的展现装置，包括：

发送单元，用于向服务器发送网页图片获取请求；

接收单元，用于接收所述服务器返回的由具有相同特征的子图片生成的整合图片，以及所述子图片的位置信息；

呈现单元，用于根据所述位置信息将每张子图片呈现在网页的相应位置。

可选的，所述呈现单元包括：

获取子单元，用于根据所述位置信息从所述整合图片中获取每张子图片；

显示子单元，用于将获取的每张子图片显示在网页的相应位置。

根据本公开实施例的第五方面，提供一种网页图片的展现装置，包括：

处理器；

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

其中，所述处理器被配置为：

调用具有相同特征的子图片；

将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；

当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位置信息发送至所述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应位置。

根据本公开实施例的第六方面，提供一种网页图片的展现装置，包括：

处理器；

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

其中，所述处理器被配置为：

向服务器发送网页图片的获取请求；

接收所述服务器返回的由具有相同特征的子图片生成的整合图片，以及所述子图片的位置信息；

根据所述位置信息将每张子图片呈现在网页的相应位置。

本公开的实施例提供的技术方案可以包括以下有益效果：

本公开通过将同一网页包含的图片生成为整合图片，使得网页展现时仅需要发起一次请求，即请求该整合图片，减少了网页请求数量，从而有助于避免网络资源的浪费，也提高了网页加载速度。

本公开还通过对图片整合方式的选择，减小图片的整合面积，以减小整合图片的数据量，从而提高整合图片的传输速度，并进一步加快网页加载速度。

本公开还针对所需整合的子图片数量，选用相应的策略来确定对子图片的整合方式，有助于控制整体运算量，提高子图片的整合效率。

本公开还通过配置专用于图片整合的整合服务器，有助于降低本地设备在执行图片整合和位置信息记录时的运算量。

本公开还通过查看子图片与整合图片中包含的子图片之间的匹配关系，及时更新整合图片和位置信息，以便确保在终端上实现最佳的网页呈现效果。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1是根据一示例性实施例示出的一种网页图片的展现方法的流程图。

图2是根据一示例性实施例示出的另一种网页图片的展现方法的流程图。

图3是根据一示例性实施例示出的网页图片的展现方法的应用场景示意图。

图4是根据一示例性实施例示出的另一种网页图片的展现方法的流程图。

图5A-5B是根据一示例性实施例示出的根据二叉树结构确定整合方式的示意图。

图6是根据一示例性实施例示出的一种网页图片的展现装置的框图。

图7是根据一示例性实施例示出的另一种网页图片的展现装置的框图。

图8是根据一示例性实施例示出的另一种网页图片的展现装置的框图。

图9是根据一示例性实施例示出的另一种网页图片的展现装置的框图。

图10是根据一示例性实施例示出的另一种网页图片的展现装置的框图。

图11是根据一示例性实施例示出的一种用于网页图片的展现装置的一结构示意图。

图12是根据一示例性实施例示出的另一种网页图片的展现装置的框图。

图13是根据一示例性实施例示出的另一种网页图片的展现装置的框图。

图14是根据一示例性实施例示出的一种用于网页图片的展现装置的另一结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本公开可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本公开范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

图1是根据一示例性实施例示出的一种网页图片的展现方法的流程图，如图1所示，该展现方法可以用于服务器中，包括以下步骤：

在步骤101中，调用具有相同特征的子图片；

在本实施例中，例如该“相同特征”可以为“名称”，即对子图片的名称进行预配置，比如使得用于网页展现的子图片的名称中包含指定的字符(例如“MI”：sample1.MI.png，sample2.MI.png，sample3.MI.png……)，从而可以将这些用于网页展现的子图片与服务器中存储的其他图片相互区分，并用于生成对应的整合图片。当然，本公开并不限定“相同特征”的具体类型，子图片的任何属性均可以作为该“相同特征”，以用于识别出对应的子图片，且子图片之间的“相同特征”可以为一种特征或多种特征的组合。例如作为另一实施例，该“相同特征”还可以是“存储路径”，从而可以将处于同一存储路径的图片，均作为用于网页展现的子图片；或者，还可以将“名称”和“存储路径”相结合，从而将处于同一路径下、名称中包含相同字符的图片作为用于网页展现的子图片。

在本实施例中，以“名称”为例进行说明。对应于不同的网页，可以使得用于每个网页的子图片的名称中包含不同的字符，比如对应于网页1的子图片，其名称中均包含“MI1”(例如sample1.MI1.png，sample2.MI1.png，sample3.MI1.png……)；对应于网页2的子图片，其名称中均包含“MI2”(例如sample1.MI2.png，sample2.MI2.png，sample3.MI2.png……)等，从而使不同网页对应的子图片之间也能够相互区分，并用于分别生成对应的整合图片。

下面从网页的开发层面，以针对“网页1”的项目开发过程为例进行说明，其处理过程如下：

首先，将网页1所需的子图片进行规则地命名，比如使得用于网页1的所有子图片的名称均为“*.MI1.png”，其中“*”为每张子图片的唯一名称，“MI1”为对应于网页1的识别参数，则网页1的开发项目的目录结构可以如下：

其中的“sample1.MI1.png”、“sample2.MI1.png”、“sample3.MI1.png”即网页1引用的多张子图片。其中，test.css中包含对各张子图片的调用语句，比如：

.button{

background-image:url(”images/sample1.MI1.png”)；

}

上述语句表达了：对存放路径为“images/sample1.MI1.png”的子图片“sample1.MI1.png”进行了调用。

在步骤102中，将具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；

在本实施例中，通过记录每张用于网页展现的子图片在整合图片中的位置信息，使得在执行网页展现时，能够根据该位置信息在整合图片中准确获取相应的单张子图片，并用于展现在网页上的相应位置。

仍以上述“网页1”的开发为例：根据名称调用网页1展现所需的所有子图片，比如所有包含“MI1”的图片，以用于生成相应的整合图片“auto.MI1.png”。同时，分别获取“sample1.MI1.png”、“sample2.MI1.png”、“sample3.MI1.png”等在整合图片“auto.MI1.png”中的位置信息。

基于获取的整合图片和位置信息，需要将开发语句中对每张子图片的调用修改为对整合图片的调用，并添加每张子图片在整合图片中的位置信息，以确保在网页展现的过程中，基于该位置信息在整合图片中选取相应的每张子图片。此时，当前项目的目录结构可以更新为：

除了项目目录，test.css的内容也需要进行相应的修改，具体如下：

一方面，子图片的调用由“images/sample1.MI1.png”修改为“images/auto.MI1.png”，即由对“sample1.MI1.png”的调用更换为对“auto.MI1.png”的调用；另一方面，新添的上述语句表明“sample1.MI1.png”在整合图片中的位置信息为：以(0,0)点为端点(通常为整合图片的左上角)、宽度(如水平方向)为256px、长度(如竖直方向)为256px的矩形区域。

通过上述过程，使得网页的开发过程被分为两个部分：1)与整合图片无关的开发过程；2)基于整合图片的语句调整过程。因此，在开发过程1)中，便于实现对子图片的更改、增减等，便于对开发语句的调试；而在开发过程2)中，则可以基于已经调试完成的语句，直接实现图片整合和语句调整，有助于加快网页项目的开发速度。

在步骤103中，当接收到终端发送的网页图片获取请求时，将整合图片和位置信息发送至终端，以使终端根据位置信息将每张子图片呈现在网页的相应位置。

在本实施例中，针对终端发送的网页图片获取请求，可以通过返回整合图片和相应的位置信息，从而将该网页所需的所有图片一次性返回终端。其中，终端在需要加载网页时会首先发起网页获取请求，以获得该网页对应的网页文档；当解析出该网页文档中对应于“图片”的标签(tag)时，终端才会发起上述的“网页图片获取请求”，以获取整合图片和位置信息。

由上述实施例可见，通过将每个网页中的所有图片(即子图片)生成为整合图片，使得终端在请求网页图片时，可以通过获取整合图片而实现对所有图片的一次性获取，使得对网页图片的请求次数不再关联于网页中包含图片的数量，有效降低了图片请求次数，有助于降低对网络资源的占用，并加快网页的加载速度。

在前述的网页图片的展现方法的实施例中，提出了基于服务器端的技术方案；相应的，本公开还提出了基于用户端的实施例。

如图2所示，图2是根据一示例性实施例示出的另一种网页图片的展现方法的流程图，该展现方法可以应用于用户侧的终端或移动终端，可以包括以下步骤：

在步骤201中，向服务器发送网页图片获取请求；

在步骤202中，接收服务器返回的由具有相同特征的子图片生成的整合图片，以及子图片的位置信息；

在步骤203中，根据位置信息将每张子图片呈现在网页的相应位置。

其中，根据位置信息将多张图片中的每张图片呈现在网页的相应位置可以包括：根据位置信息从整合图片中获取每张子图片；将获取的每张子图片显示在网页的相应位置。

在上述实施例中，仅需向服务器发起一次网页图片的获取请求，即可获取对应于网页中的所有图片的整合图片，以用于根据该整合图片和相应的位置信息，将每张图片分别展现于网页中，从而减少了请求发送次数，有助于降低网络资源的占用、加快网页展现速度。

作为一示例性实施例，图3示出了一种网页图片的展现方法的应用场景示意图。

如图3所示，假定一网页中包含左侧所示的7张独立的子图片。首先，服务器侧需要将这7张子图片的命名进行统一，比如采用“*.MI1.png”的格式，从而表明这些子图片需要展现在同一网页中。

服务器可以根据名称中包含的识别参数(如上述的“MI1”)来调用当前网页对应的所有子图片，并在本地完成整合图片的生成。从理论上而言，只要多张子图片之间不存在交叉重叠等现象，即确保每张子图片在整合图片中的独立性，该整合图片即可应用于相应网页的展现中。

可选的，由于终端在展现网页时，是根据位置信息从整合图片中获取每张子图片的，因而为了方便对每张子图片的获取，并且降低记录的位置信息的复杂度，需要在整合处理的过程中加以更多干涉。该干涉过程可以包括：

如图3所示，将每张子图片对应的占用区域都扩展为虚线所示的矩形区域中，且多张子图片之间的矩形区域相互不重叠。因此，仅需要记录每个矩形区域的一个端点的坐标信息以及该矩形区域的长、宽，即可在整合图片上唯一确定相应的子图片。

作为一示例性实施例，图3中以整合图片的左上角为原点O(0,0)来建立坐标系XOY，则可以分别记录每张子图片的位置信息。比如最左侧的“时钟”子图片的位置信息可以为：{(0,0)、256px、260px}，表明在整合图片中以(0,0)为端点、沿X轴方向取长度为256px(像素)、沿Y轴方向取宽度为260px，即可获取该“时钟”子图片。再比如与“时钟”子图片相邻的“笑脸”子图片的位置信息可以为：{(262,137)、128、123}，表明在整合图片中以(262,137)为端点、沿X轴方向取长度为128px、沿Y轴方向取宽度为123px，即可获取该“笑脸”子图片。

在相关技术中，终端在展现该网页时，需要向服务器分别发送7次网页图片的获取请求，以分别获取这7张独立图片。而在本公开的技术方案中，通过将这7张子图片整合为一张整合图片，使得终端仅需要发送一次网页图片的获取请求，即可获取该整合图片，并据此实现对网页中所有图片的展现。当然，图3仅示出了一种示例性的图片整合方式，而对于多张子图片的整合，实际上可能存在很多种不同情况。因此，可以根据实际需求来确定采用的整合方式。

此外，本公开中的“相应位置”是指每张子图片在网页上被配置的展现位置，由浏览器根据对网页文档(如HTML(HyperText Mark-up Language，超文本标记语言)文档)的解析，即可确定每张子图片在网页上的展现位置。比如图3中，“时钟”子图片展现在网页的右上角、“笑脸”子图片展现在网页的左上角等。

如图4所示，图4示出了根据一示例性实施例示出的一种网页图片的展现方法的流程图，该方法的实现步骤可以包括：

在步骤401中，调用具有相同特征的子图片；

在步骤402中，确定用于对所述子图片进行整合的整合方式；

在本实施例中，作为一示例性实施例，由于多张子图片的每种整合方式，实际上都可以通过相应的二叉树结构来进行表示，因而可以根据多张子图片对应的二叉树结构来确定相应的整合方式。

比如图5A中，以“图1”、“图2”和“图3”的整合为例，说明了二叉树结构与整合方式之间的相互关系。首先，确定“图1”、“图2”和“图3”的数量，即共3张子图片；然后，根据数量生成图5A左侧所示的二叉树结构，该结构中沿Y轴方向(即竖直方向)的线A将“图1”与其他子图片之间分离，并通过沿X轴方向(即水平方向)的线B将“图2”和“图3”之间分离；最后，基于上述的二叉树结构，即可生成图5A右侧所示的整合结果。

类似地，如图5B所示，示出了对“图1”、“图2”和“图3”进行整合的另一整合方式：在图5B左侧所示的二叉树结构中，通过沿Y轴方向的线A将“图1”与其他子图片之间分离，并通过沿Y轴方向的线B将“图2”和“图3”之间分离，从而基于该二叉树结构，即可生成图5B右侧所示的整合结果。

在步骤403中，从整合方式中选择对子图片进行整合后占用面积最小的整合方式；

在本实施例中，结合图5A和图5B所示的实施例：根据每种二叉树结构，就可以确定“图1”、“图2”和“图3”对应的整合图片(如图5A和图5B的右侧所示)，并由此计算相应的整合后占用面积。比如图5A中，整合后占用面积即“图1”、“图2”和“图3”的面积之和；而在图5B中，整合后占用面积为虚线所示的矩形的面积，即三个“图1”的面积之和。因此，图5A对应的整合方式可以被认为优于图5B对应的整合方式。

在步骤404中，按照占用面积最小的整合方式将具有相同特征的子图片生成整合图片，并记录每张子图片在整合图片中的位置信息。

在本实施例中，通过比较各个整合方式对应的整合后占用面积的大小，从而可以选出整合后占用面积最小的整合方式，并使得相应的整合图片的数据量最小，有助于缩短整合图片的传输时间，加快相应网页的展现速度。

其中，当所需整合的子图片的数量一定时，其对应的二叉树结构也能够确定。但是，当子图片数量较大时，其对应的二叉树结构的数量将非常多，甚至远大于n！(n为子图片数量，n！表示n的阶乘)。因此，为了控制整合处理过程中的计算量，提高整合效率，可以进一步采用下述方式：

判断子图片的数量是否小于预设数量。其中，当子图片的数量小于预设数量时，通过穷举方式确定多种整合方式，即列举出子图片对应的所有情况下的整合方式，并一一确定相应的整合后占用面积，以选择出占用面积最小的整合方式。同时，当子图片的数量大于或等于预设数量时，可以通过贪心策略等确定多种整合方式。当采用贪心策略等方式时，每次总考虑当前最优解，从而通过多次试探，能够得到有限个数的相对较优的整合方式，从而能够在当前确定了的所有二叉树结构中，选择出整合后占用面积最小的整合方式。

需要说明的是：

在确定了最终所需要采用的整合方式后，本地设备执行对子图片的整合处理。在整合处理的过程中，基于每张子图片的长、宽等参数，以及多张子图片之间的位置关系，即可获取和记录每张子图片对应的位置信息，以用于最终的网页展现。

此外，除了在服务器本地执行整合处理，还可以配置另一整合服务器，使其专用于对子图片进行整合处理，则相应的处理步骤可以包括：将子图片上传至整合服务器；接收整合服务器返回的整合图片和每张子图片的位置信息。

其中，通过配置专用于子图片整合的整合服务器，有助于节省本地服务器的运算资源。并且，当整合服务器的配置较高时，有助于提高对子图片的整合效率。其中，整合服务器也可以采用图4所示的技术方案，确保选用整合后占用面积最小的整合方式，以减小整合图片的数据量、提高整合图片的传输效率以及加快网页的展现速度。

在步骤405中，当接收到终端发送的网页图片获取请求时，将整合图片和位置信息发送至终端，以使终端根据位置信息将每张子图片呈现在网页的相应位置。

在上述任一网页图片的展现方法的实施例中，还可以判断具有相同特征的子图片与整合图片中包含的子图片是否匹配；若不匹配，则更新整合图片和位置信息，从而确保终端获取的整合图片和位置信息总是最新数据，以使得呈现出最佳的网页展现效果。

与前述的基于服务器侧的网页图片的展现方法的实施例相对应，本公开还提供了用于服务器侧的网页图片的展现装置的实施例。

图6是根据一示例性实施例示出的一种网页图片的展现装置的框图。如图6所示，该展现装置包括：调用单元61、处理单元62和传输单元63。

其中，调用单元61，被配置为调用具有相同特征的子图片；

处理单元62，被配置将具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；

传输单元63，被配置为当接收到终端发送的网页图片获取请求时，将整合图片和位置信息发送至终端，以使终端根据位置信息将每张子图片呈现在网页的相应位置。

在上述实施例中，通过将每个网页中的所有图片(即子图片)生成为整合图片，使得终端在请求网页图片时，可以通过获取整合图片而实现对所有图片的一次性获取，使得对网页图片的请求次数不再关联于网页中包含图片的数量，有效降低了图片请求次数，有助于降低对网络资源的占用，并加快网页的加载速度。

如图7所示，图7是根据一示例性实施例示出的另一种网页图片的展现装置的框图，该实施例在前述图6所示实施例的基础上，处理单元62可以包括：确定子单元621、选择子单元622和生成子单元623。

其中，确定子单元621，被配置为确定用于对子图片进行整合的整合方式；

选择子单元622，被配置为从整合方式中选择对子图片进行整合后占用面积最小的整合方式；

生成子单元623，被配置为按照占用面积最小的整合方式将具有相同特征的子图片生成为整合图片。

在上述实施例中，通过比较各个整合方式对应的整合后占用面积的大小，从而可以选出整合后占用面积最小的整合方式，并使得相应的整合图片的数据量最小，有助于缩短整合图片的传输时间，加快相应网页的展现速度。

当然，本领域技术人员可以理解的是：采用任意方式对子图片进行整合后，生成的整合图片均能够适用于本公开的技术方案中。

如图8所示，图8是根据一示例性实施例示出的另一种网页图片的展现装置的框图，该实施例在前述图7所示实施例的基础上，确定子单元621可以包括：数量判断模块621A和策略确定模块621B。

其中，数量判断模块621A，被配置为判断子图片的数量是否小于预设数量；

策略确定模块621B，被配置为在子图片的数量小于预设数量的情况下，通过穷举方式确定多种整合方式；以及，在子图片的数量大于或等于预设数量的情况下，通过贪心策略确定多种整合方式。

在上述实施例中，通过针对不同情况而采用不同的策略，有助于在子图片数量较少(比如小于预设数量)时，通过穷举方式来使得整合后占用面积最小；而在子图片数量较多(比如大于或等于预设数量)时，通过如贪心策略等来减小运算量，并在得到的多种整合方式中选择整合后占用面积相对最小的整合方式。

如图9所示，图9是根据一示例性实施例示出的另一种网页图片的展现装置的框图，该实施例在前述图6所示实施例的基础上，处理单元62可以包括：上传子单元624和接收子单元625。

其中，上传子单元624，被配置为将子图片上传至整合服务器；

接收子单元625，被配置为接收整合服务器返回的整合图片和每张子图片的位置信息。

需要说明的是，上述图9所示的装置实施例中的获取单元62的结构也可以包含在前述图6至图8任意一个装置实施例中，对此本公开不进行限制。

在上述实施例中，通过配置专用于图片整合的整合服务器，有助于节省本地服务器的运算资源。并且，当整合服务器的配置较高时，有助于提高对子图片的整合效率。

如图10所示，图10是根据一示例性实施例示出的另一种网页图片的展现装置的框图，该实施例在前述图6所示实施例的基础上，还可以包括：判断单元64和更新单元65。

其中，判断单元64，被配置为判断所述具有相同特征的子图片与所述整合图片中包含的子图片是否匹配；

更新单元65，被配置为在不匹配的情况下，更新所述整合图片和所述位置信息。

在上述实施例中，通过查看子图片与整合图片中包含的子图片之间的匹配关系，及时更新整合图片和位置信息，以便确保在终端上实现最佳的网页呈现效果。

上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

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

相应的，本公开还提供一种网页图片的展现装置，包括：处理器；用于存储处理器可执行指令的存储器；其中，处理器被配置为：调用具有相同特征的子图片；将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；当接收到终端发送的网页图片获取请求时，将整合图片和位置信息发送至终端，以使终端根据位置信息将每张子图片呈现在网页的相应位置。

相应的，本公开还提供一种服务器，服务器包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行一个或者一个以上程序包含用于进行以下操作的指令：调用具有相同特征的子图片；将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；当接收到终端发送的网页图片的获取请求时，将整合图片和位置信息发送至终端，以使终端根据位置信息将每张子图片呈现在网页的相应位置。

如图11所示，图11是根据一示例性实施例示出的一种用于网页图片的展现装置的一结构示意图。例如，装置1100可以被提供为一服务器。参照图11，装置1100包括处理组件1122，其进一步包括一个或多个处理器，以及由存储器1132所代表的存储器资源，用于存储可由处理部件1122的执行的指令，例如应用程序。存储器1132中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件1122被配置为执行指令，以执行上述网页图片的展现方法。

装置1100还可以包括一个电源组件1126被配置为执行装置1100的电源管理，一个有线或无线网络接口1150被配置为将装置1100连接到网络，和一个输入输出(I/O)接口1158。装置1100可以操作基于存储在存储器1132的操作系统，例如Windows ServerTM，MacOS XTM，UnixTM,LinuxTM，FreeBSDTM或类似。

与前述的基于终端侧的网页图片的展现方法的实施例相对应，本公开还提供了基于终端侧的网页图片的展现装置的实施例。

如图12所示，图12是根据一示例性实施例示出的一种网页图片的展现装置的框图，该展现装置可以包括：发送单元1201、接收单元1202和呈现单元1203。

其中，发送单元1201，被配置为向服务器发送网页图片获取请求；

接收单元1202，被配置为接收服务器返回的由具有相同特征的子图片生成的整合图片，以及子图片的位置信息；

呈现单元1203，被配置为根据位置信息将每张子图片呈现在网页的相应位置。

在上述实施例中，仅需向服务器发起一次网页图片的获取请求，即可获取对应于网页中的所有图片的整合图片，以用于根据该整合图片和相应的位置信息，将每张子图片分别展现于网页中，从而减少了请求发送次数，有助于降低网络资源的占用、加快网页展现速度。

如图13所示，图13是根据一示例性实施例示出的另一种网页图片的展现装置的框图，该实施例在前述图12所示实施例的基础上，呈现单元1203可以包括：获取子单元1203A和显示子单元1203B。

获取子单元1203A，被配置为根据位置信息从整合图片中获取每张子图片；

显示子单元1203B，被配置为将获取的每张子图片显示在网页的相应位置。

上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

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

相应的，本公开还提供一种网页图片的展现装置，包括：处理器；用于存储处理器可执行指令的存储器；其中，处理器被配置为：向服务器发送网页图片获取请求；接收服务器返回的由具有相同特征的子图片生成的整合图片，以及每张子图片的位置信息；根据位置信息将每张子图片呈现在网页的相应位置。

相应的，本公开还提供一种终端，终端包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行一个或者一个以上程序包含用于进行以下操作的指令：向服务器发送网页图片获取请求；接收服务器返回的由具有相同特征的子图片生成的整合图片，以及子图片的位置信息；根据位置信息将每张子图片呈现在网页的相应位置。

如图14所示，图14是根据一示例性实施例示出的一种用于网页图片的展现装置的一结构示意图。例如，装置1400可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图14，装置1400可以包括以下一个或多个组件：处理组件1402，存储器1404，电源组件1406，多媒体组件1408，音频组件1410，输入/输出(I/O)的接口812，传感器组件1414，以及通信组件1416。

处理组件1402通常控制装置1400的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件1402可以包括一个或多个处理器1420来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件1402可以包括一个或多个模块，便于处理组件1402和其他组件之间的交互。例如，处理部件1402可以包括多媒体模块，以方便多媒体组件1408和处理组件1402之间的交互。

存储器1404被配置为存储各种类型的数据以支持在设备1400的操作。这些数据的示例包括用于在装置1400上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器1404可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件1406为装置1400的各种组件提供电力。电源组件1406可以包括电源管理系统，一个或多个电源，及其他与为装置1400生成、管理和分配电力相关联的组件。

多媒体组件1408包括在装置1400和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件1408包括一个前置摄像头和/或后置摄像头。当装置1400处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件1410被配置为输出和/或输入音频信号。例如，音频组件1410包括一个麦克风(MIC)，当装置1400处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器1404或经由通信组件1416发送。在一些实施例中，音频组件1410还包括一个扬声器，用于输出音频信号。

I/O接口1412为处理组件1402和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件1414包括一个或多个传感器，用于为装置1400提供各个方面的状态评估。例如，传感器组件1414可以检测到装置1400的打开/关闭状态，组件的相对定位，例如组件为装置1400的显示器和小键盘，传感器组件1414还可以检测装置1400或装置1400一个组件的位置改变，用户与装置1400接触的存在或不存在，装置1400方位或加速/减速和装置1400的温度变化。传感器组件1414可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件1414还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件1414还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件1416被配置为便于装置1400和其他设备之间有线或无线方式的通信。装置1400可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信部件1416经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，通信部件1416还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置1400可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器1404，上述指令可由装置1400的处理器1420执行以完成上述网页图片的展现方法。例如，非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

此外，本公开还提供了：

一种非临时性计算机可读存储介质，当存储介质中的指令由服务器的处理器执行时，使得服务器能够执行一种网页图片的展现方法，方法包括：

调用具有相同特征的子图片；

将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；

当接收到终端发送的网页图片获取请求时，将整合图片和位置信息发送至终端，以使终端根据位置信息将每张子图片呈现在网页的相应位置。

可选的，将所述具有相同特征的子图片生成一张整合图片，包括：

确定用于对所述子图片进行整合的整合方式；

从所述整合方式中选择对所述子图片进行整合后占用面积最小的整合方式；

按照所述占用面积最小的整合方式将所述具有相同特征的子图片生成所述整合图片。

可选的，确定用于对所述子图片进行整合的整合方式包括：

判断所述子图片的数量是否小于预设数量；

当所述子图片的数量小于预设数量时，通过穷举方式确定所述多种整合方式；以及

当所述子图片的数量大于或等于所述预设数量时，通过贪心策略确定所述多种整合方式。

可选的，将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息，包括：

将所述多张图片上传至整合服务器；

接收所述整合服务器返回的所述整合图片和每张子图片的位置信息。

可选的，还包括：

判断所述具有相同特征的子图片与所述整合图片中包含的子图片是否匹配；

若不匹配，则更新所述整合图片和所述位置信息。

一种非临时性计算机可读存储介质，当存储介质中的指令由终端的处理器执行时，使得终端能够执行一种网页图片的展现方法，方法包括：

向服务器发送网页图片获取请求；

接收服务器返回的由具有相同特征的子图片生成的整合图片，以及每张子图片的位置信息；

根据位置信息将每张子图片呈现在网页的相应位置。

可选的，根据所述位置信息将每张子图片呈现在网页的相应位置包括：

根据所述位置信息从所述整合图片中获取每张子图片；

将获取的每张子图片显示在网页的相应位置。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims (9)

1.一种网页图片的展现方法，其特征在于，包括：

调用具有相同特征的子图片；

将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；

当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位置信息发送至所述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应位置；

还包括：

判断所述具有相同特征的子图片与所述整合图片中包含的子图片是否匹配；

若不匹配，则更新所述整合图片和所述位置信息。

2.根据权利要求1所述的展现方法，其特征在于，将所述具有相同特征的子图片生成一张整合图片，包括：

确定用于对所述子图片进行整合的整合方式；

从所述整合方式中选择对所述子图片进行整合后占用面积最小的整合方式；

按照所述占用面积最小的整合方式将所述具有相同特征的子图片生成所述整合图片。

3.根据权利要求2所述的展现方法，其特征在于，确定用于对所述子图片进行整合的整合方式包括：

判断所述子图片的数量是否小于预设数量；

当所述子图片的数量小于预设数量时，通过穷举方式确定多种整合方式，当所述子图片的数量大于或等于所述预设数量时，通过贪心策略确定所述多种整合方式。

4.根据权利要求1所述的展现方法，其特征在于，将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息，包括：

将所述子图片上传至整合服务器；

接收所述整合服务器返回的所述整合图片和每张子图片的位置信息。

5.一种网页图片的展现装置，其特征在于，包括：

调用单元，用于调用具有相同特征的子图片；

处理单元，用于将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；

传输单元，用于当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位置信息发送至所述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应位置；

还包括：

判断单元，用于判断所述具有相同特征的子图片与所述整合图片中包含的子图片是否匹配；

更新单元，用于在不匹配的情况下，更新所述整合图片和所述位置信息。

6.根据权利要求5所述的展现装置，其特征在于，所述处理单元包括：

确定子单元，用于确定用于对所述子图片进行整合的整合方式；

选择子单元，用于从所述整合方式中选择对所述子图片进行整合后占用面积最小的整合方式；

生成子单元，用于按照所述占用面积最小的整合方式将所述具有相同特征的子图片生成为所述整合图片。

7.根据权利要求6所述的展现装置，其特征在于，所述确定子单元包括：

数量判断模块，用于判断所述子图片的数量是否小于预设数量；

策略确定模块，用于在所述子图片的数量小于预设数量的情况下，通过穷举方式确定多种整合方式，在所述子图片的数量大于或等于所述预设数量的情况下，通过贪心策略确定所述多种整合方式。

8.根据权利要求7所述的展现装置，其特征在于，所述处理单元包括：

上传子单元，用于将所述子图片上传至整合服务器；

接收子单元，用于接收所述整合服务器返回的所述整合图片和每张子图片的位置信息。

9.一种网页图片的展现装置，其特征在于，包括：

处理器；

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

其中，所述处理器被配置为：

调用具有相同特征的子图片；

将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；

当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位置信息发送至所述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应位置；

还包括：

判断所述具有相同特征的子图片与所述整合图片中包含的子图片是否匹配；

若不匹配，则更新所述整合图片和所述位置信息。