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

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

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

【背景技术】
[0002] 浏览器在向服务器请求到相应的网页文件后，通过加载该网页文件来实现网页的 渲染和加载。为了提高网页的加载速度，尤其是当网页包含的图片量较大时，相关技术中提 出了通过单独请求和下载网页图片的方式，实现了对网页的分步加载。
[0003] 然而，随着单一网页的功能越来越复杂，使得在同一网页上显示的图片元素越来 越多，则即便采用上述的分步加载方式，该网页在首次加载时仍需要发起与图片元素的数 量相等次数的图片获取请求，将导致网络资源的大量消耗，且限制了网页的加载速度。


【发明内容】

[0004] 本公开提供网页图片的展现方法和展现装置，以解决相关技术中网页在首次加载 时需要发起与图片元素的数量相等次数的图片获取请求，将导致网络资源的大量消耗，且 限制了网页的加载速度的问题。
[0005] 根据本公开实施例的第一方面，提供一种网页图片的展现方法，包括：
[0006] 调用具有相同特征的子图片；
[0007] 将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信 息；
[0008] 当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位置信息发送 至所述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应位置。
[0009] 可选的，将所述具有相同特征的子图片生成一张整合图片，包括：
[0010] 确定用于对所述子图片进行整合的整合方式；
[0011] 从所述整合方式中选择对所述子图片进行整合后占用面积最小的整合方式；
[0012] 按照所述占用面积最小的整合方式将所述具有相同特征的子图片生成所述整合 图片。
[0013] 可选的，确定用于对所述子图片进行整合的整合方式包括：
[0014] 判断所述子图片的数量是否小于预设数量；
[0015] 当所述子图片的数量小于预设数量时，通过穷举方式确定所述多种整合方式；以 及
[0016] 当所述子图片的数量大于或等于所述预设数量时，通过贪心策略确定所述多种整 合方式。
[0017] 可选的，将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的 位置信息，包括：
[0018] 将所述多张图片上传至整合服务器；
[0019] 接收所述整合服务器返回的所述整合图片和每张子图片的位置信息。
[0020] 可选的，还包括：
[0021] 判断所述具有相同特征的子图片与所述整合图片中包含的子图片是否匹配；
[0022] 若不匹配，则更新所述整合图片和所述位置信息。
[0023] 根据本公开实施例的第二方面，提供一种网页图片的展现方法，包括：
[0024] 向服务器发送网页图片获取请求；
[0025] 接收所述服务器返回的由具有相同特征的子图片生成的整合图片，以及所述子图 片的位置信息；
[0026] 根据所述位置信息将每张子图片呈现在网页的相应位置。
[0027] 可选的，根据所述位置信息将每张子图片呈现在网页的相应位置包括：
[0028] 根据所述位置信息从所述整合图片中获取每张子图片；
[0029] 将获取的每张子图片显示在网页的相应位置。
[0030] 根据本公开实施例的第三方面，提供一种网页图片的展现装置，包括：
[0031] 调用单元，用于调用具有相同特征的子图片；
[0032] 处理单元，用于将所述具有相同特征的子图片生成一张整合图片，并记录每张子 图片的位置信息；
[0033] 传输单元，用于当接收到终端发送的网页图片获取请求时，将所述整合图片和所 述位置信息发送至所述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的 相应位置。
[0034] 可选的，所述处理单元包括：
[0035] 确定子单元，用于确定用于对所述子图片进行整合的整合方式；
[0036] 选择子单元，用于从所述整合方式中选择对所述子图片进行整合后占用面积最小 的整合方式；
[0037] 生成子单元，用于按照所述占用面积最小的整合方式将所述具有相同特征的子图 片生成为所述整合图片。
[0038] 可选的，所述确定子单元包括：
[0039] 数量判断模块，用于判断所述子图片的数量是否小于预设数量；
[0040] 策略确定模块，用于在所述子图片的数量小于预设数量的情况下，通过穷举方式 确定所述多种整合方式；以及，在所述子图片的数量大于或等于所述预设数量的情况下，通 过贪心策略确定所述多种整合方式。
[0041] 可选的，所述处理单元包括：
[0042] 上传子单元，用于将所述多张图片上传至整合服务器；
[0043] 接收子单元，用于接收所述整合服务器返回的所述整合图片和每张子图片的位置 信息。
[0044] 可选的，还包括：
[0045] 判断单元，用于判断所述具有相同特征的子图片与所述整合图片中包含的子图片 是否匹配；
[0046] 更新单元，用于在不匹配的情况下，更新所述整合图片和所述位置信息。
[0047] 根据本公开实施例的第四方面，提供一种网页图片的展现装置，包括：
[0048] 发送单元，用于向服务器发送网页图片获取请求；
[0049] 接收单元，用于接收所述服务器返回的由具有相同特征的子图片生成的整合图 片，以及所述子图片的位置信息；
[0050] 呈现单元，用于根据所述位置信息将每张子图片呈现在网页的相应位置。
[0051] 可选的，所述呈现单元包括：
[0052] 获取子单元，用于根据所述位置信息从所述整合图片中获取每张子图片；
[0053] 显示子单元，用于将获取的每张子图片显示在网页的相应位置。
[0054] 根据本公开实施例的第五方面，提供一种网页图片的展现装置，包括：
[0055] 处理器；
[0056] 用于存储处理器可执行指令的存储器；
[0057] 其中，所述处理器被配置为：
[0058] 调用具有相同特征的子图片；
[0059] 将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信 息；
[0060] 当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位置信息发送 至所述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应位置。
[0061] 根据本公开实施例的第六方面，提供一种网页图片的展现装置，包括：
[0062] 处理器；
[0063] 用于存储处理器可执行指令的存储器；
[0064] 其中，所述处理器被配置为：
[0065] 向服务器发送网页图片的获取请求；
[0066] 接收所述服务器返回的由具有相同特征的子图片生成的整合图片，以及所述子图 片的位置信息；
[0067] 根据所述位置信息将每张子图片呈现在网页的相应位置。
[0068] 本公开的实施例提供的技术方案可以包括以下有益效果：
[0069] 本公开通过将同一网页包含的图片生成为整合图片，使得网页展现时仅需要发起 一次请求，即请求该整合图片，减少了网页请求数量，从而有助于避免网络资源的浪费，也 提高了网页加载速度。
[0070] 本公开还通过对图片整合方式的选择，减小图片的整合面积，以减小整合图片的 数据量，从而提高整合图片的传输速度，并进一步加快网页加载速度。
[0071] 本公开还针对所需整合的子图片数量，选用相应的策略来确定对子图片的整合方 式，有助于控制整体运算量，提高子图片的整合效率。
[0072] 本公开还通过配置专用于图片整合的整合服务器，有助于降低本地设备在执行图 片整合和位置信息记录时的运算量。
[0073] 本公开还通过查看子图片与整合图片中包含的子图片之间的匹配关系，及时更新 整合图片和位置信息，以便确保在终端上实现最佳的网页呈现效果。
[0074] 应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不 能限制本公开。

【专利附图】

【附图说明】
[0075] 此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施 例，并与说明书一起用于解释本公开的原理。
[0076] 图1是根据一示例性实施例示出的一种网页图片的展现方法的流程图。
[0077] 图2是根据一示例性实施例示出的另一种网页图片的展现方法的流程图。
[0078] 图3是根据一示例性实施例示出的网页图片的展现方法的应用场景示意图。
[0079] 图4是根据一示例性实施例示出的另一种网页图片的展现方法的流程图。
[0080] 图5A-5B是根据一示例性实施例示出的根据二叉树结构确定整合方式的示意图。
[0081] 图6是根据一示例性实施例示出的一种网页图片的展现装置的框图。
[0082] 图7是根据一示例性实施例示出的另一种网页图片的展现装置的框图。
[0083] 图8是根据一示例性实施例示出的另一种网页图片的展现装置的框图。
[0084] 图9是根据一示例性实施例示出的另一种网页图片的展现装置的框图。
[0085] 图10是根据一示例性实施例示出的另一种网页图片的展现装置的框图。
[0086] 图11是根据一示例性实施例示出的一种用于网页图片的展现装置的一结构示意 图。
[0087] 图12是根据一示例性实施例示出的另一种网页图片的展现装置的框图。
[0088] 图13是根据一示例性实施例示出的另一种网页图片的展现装置的框图。
[0089] 图14是根据一示例性实施例示出的一种用于网页图片的展现装置的另一结构示 意图。

【具体实施方式】
[0090] 这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及 附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例 中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附 权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
[0091] 在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。 在本公开和所附权利要求书中所使用的单数形式的"一种"、"所述"和"该"也旨在包括多 数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语"和/或"是指 并包含一个或多个相关联的列出项目的任何或所有可能组合。
[0092] 应当理解，尽管在本公开可能采用术语第一、第二、第三等来描述各种信息，但这 些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离 本公开范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第 一信息。取决于语境，如在此所使用的词语"如果"可以被解释成为"在……时"或"当…… 时"或"响应于确定"。
[0093] 图1是根据一示例性实施例示出的一种网页图片的展现方法的流程图，如图1所 示，该展现方法可以用于服务器中，包括以下步骤：
[0094] 在步骤101中，调用具有相同特征的子图片；
[0095] 在本实施例中，例如该"相同特征"可以为"名称"，即对子图片的名称进行预配置， 比如使得用于网页展现的子图片的名称中包含指定的字符（例如"MI" ：samplel. MI. png， sample2. MI. png, sample3. MI. png......)，从而可以将这些用于网页展现的子图片与服务器 中存储的其他图片相互区分，并用于生成对应的整合图片。当然，本公开并不限定"相同特 征"的具体类型，子图片的任何属性均可以作为该"相同特征"，以用于识别出对应的子图 片，且子图片之间的"相同特征"可以为一种特征或多种特征的组合。例如作为另一实施例， 该"相同特征"还可以是"存储路径"，从而可以将处于同一存储路径的图片，均作为用于网 页展现的子图片；或者，还可以将"名称"和"存储路径"相结合，从而将处于同一路径下、名 称中包含相同字符的图片作为用于网页展现的子图片。
[0096] 在本实施例中，以"名称"为例进行说明。对应于不同的网页，可以使得用于每 个网页的子图片的名称中包含不同的字符，比如对应于网页1的子图片，其名称中均包含 "Mil"（例如 sample 1. Mil. png，sample2. Mil. png，sample3. Mil. png......);对应于网页 2 的 子图片，其名称中均包含 "MI2"（例如 samplel. MI2. png，sample2. MI2. png，sample3. ΜΙ2· png……）等，从而使不同网页对应的子图片之间也能够相互区分，并用于分别生成对应的 整合图片。
[0097] 下面从网页的开发层面，以针对"网页1"的项目开发过程为例进行说明，其处理过 程如下：
[0098] 首先，将网页1所需的子图片进行规则地命名，比如使得用于网页1的所有子图片 的名称均为"*.MIl.png"，其中为每张子图片的唯一名称，"Mil"为对应于网页1的识 别参数，则网页1的开发项目的目录结构可以如下：
[0099] PATH/TO/THIS/PROJECT | auto.py | readme.md Lsample I lesl c、s Li mages samplel .MI 1 .png samplc2.MI 1 .png sample3.MI 1 .png
[0100] 其中的"samplel. Mil. png"、"sample2. Mil. png"、"sample3. Mil. png"即网页 1 弓| 用的多张子图片。其中，test, css中包含对各张子图片的调用语句，比如：
[0101] . button {
[0102] background-image: url (，' images/samp lei. Mil. png"）；
[0103] }
[0104] 上述语句表达了：对存放路径为"images/samplel. Mil. png"的子图片"samplel. Mil. png"进行了调用。
[0105] 在步骤102中，将具有相同特征的子图片生成一张整合图片，并记录每张子图片 的位置信息；
[0106] 在本实施例中，通过记录每张用于网页展现的子图片在整合图片中的位置信息， 使得在执行网页展现时，能够根据该位置信息在整合图片中准确获取相应的单张子图片， 并用于展现在网页上的相应位置。
[0107] 仍以上述"网页1"的开发为例：根据名称调用网页1展现所需的所有子图片，t匕 如所有包含"Mil"的图片，以用于生成相应的整合图片"auto. Mil. png"。同时，分别获取 "samplel. Mil. png"、"sample2. Mil. png"、"sample3. Mil. png" 等在整合图片 "auto. MIL png"中的位置信息。
[0108] 基于获取的整合图片和位置信息，需要将开发语句中对每张子图片的调用修改为 对整合图片的调用，并添加每张子图片在整合图片中的位置信息，以确保在网页展现的过 程中，基于该位置信息在整合图片中选取相应的每张子图片。此时，当前项目的目录结构可 以更新为：
[0109] PATH/TO/THIS/PROJECT | auto.py | readme.md Lsample | lesi.ess Limages auto.MI 1 .png
[0110] 除了项目目录，test, css的内容也需要进行相应的修改，具体如下：
[0111] ?button { background-image: url C "images/auto. Μ11 .pngO ; background-repeat: no-repeat; background-posilion:0px Opx; width:256px;
[0112] hcighl:256px; }
[0113] 一方面，子图片的调用由 "images/sample 1. Mil. png" 修改为 "images/auto. Mil. png"，即由对"samplel. Mil. png"的调用更换为对"auto. Mil. png"的调用；另一方面，新添 的上述语句表明"881^161.101.?叩"在整合图片中的位置信息为：以（0,0)点为端点（通 常为整合图片的左上角）、宽度（如水平方向）为256px、长度（如坚直方向）为256px的 矩形区域。
[0114] 通过上述过程，使得网页的开发过程被分为两个部分：1)与整合图片无关的开发 过程；2)基于整合图片的语句调整过程。因此，在开发过程1)中，便于实现对子图片的更 改、增减等，便于对开发语句的调试；而在开发过程2)中，则可以基于已经调试完成的语 句，直接实现图片整合和语句调整，有助于加快网页项目的开发速度。
[0115] 在步骤103中，当接收到终端发送的网页图片获取请求时，将整合图片和位置信 息发送至终端，以使终端根据位置信息将每张子图片呈现在网页的相应位置。
[0116] 在本实施例中，针对终端发送的网页图片获取请求，可以通过返回整合图片和相 应的位置信息，从而将该网页所需的所有图片一次性返回终端。其中，终端在需要加载网页 时会首先发起网页获取请求，以获得该网页对应的网页文档；当解析出该网页文档中对应 于"图片"的标签（tag)时，终端才会发起上述的"网页图片获取请求"，以获取整合图片和 位置信息。
[0117] 由上述实施例可见，通过将每个网页中的所有图片（即子图片）生成为整合图片， 使得终端在请求网页图片时，可以通过获取整合图片而实现对所有图片的一次性获取，使 得对网页图片的请求次数不再关联于网页中包含图片的数量，有效降低了图片请求次数， 有助于降低对网络资源的占用，并加快网页的加载速度。
[0118] 在前述的网页图片的展现方法的实施例中，提出了基于服务器端的技术方案；相 应的，本公开还提出了基于用户端的实施例。
[0119] 如图2所示，图2是根据一示例性实施例示出的另一种网页图片的展现方法的流 程图，该展现方法可以应用于用户侧的终端或移动终端，可以包括以下步骤：
[0120] 在步骤201中，向服务器发送网页图片获取请求；
[0121] 在步骤202中，接收服务器返回的由具有相同特征的子图片生成的整合图片，以 及子图片的位置信息；
[0122] 在步骤203中，根据位置信息将每张子图片呈现在网页的相应位置。
[0123] 其中，根据位置信息将多张图片中的每张图片呈现在网页的相应位置可以包括： 根据位置信息从整合图片中获取每张子图片；将获取的每张子图片显示在网页的相应位 置。
[0124] 在上述实施例中，仅需向服务器发起一次网页图片的获取请求，即可获取对应于 网页中的所有图片的整合图片，以用于根据该整合图片和相应的位置信息，将每张图片分 别展现于网页中，从而减少了请求发送次数，有助于降低网络资源的占用、加快网页展现速 度。
[0125] 作为一示例性实施例，图3示出了一种网页图片的展现方法的应用场景示意图。
[0126] 如图3所示，假定一网页中包含左侧所示的7张独立的子图片。首先，服务器侧需 要将这7张子图片的命名进行统一，比如采用Mil. png"的格式，从而表明这些子图片需 要展现在同一网页中。
[0127] 服务器可以根据名称中包含的识别参数（如上述的"Mil"）来调用当前网页对应 的所有子图片，并在本地完成整合图片的生成。从理论上而言，只要多张子图片之间不存在 交叉重叠等现象，即确保每张子图片在整合图片中的独立性，该整合图片即可应用于相应 网页的展现中。
[0128] 可选的，由于终端在展现网页时，是根据位置信息从整合图片中获取每张子图片 的，因而为了方便对每张子图片的获取，并且降低记录的位置信息的复杂度，需要在整合处 理的过程中加以更多干涉。该干涉过程可以包括：
[0129] 如图3所示，将每张子图片对应的占用区域都扩展为虚线所示的矩形区域中，且 多张子图片之间的矩形区域相互不重叠。因此，仅需要记录每个矩形区域的一个端点的坐 标信息以及该矩形区域的长、宽，即可在整合图片上唯一确定相应的子图片。
[0130] 作为一不例性实施例，图3中以整合图片的左上角为原点0(0, 0)来建立坐标系 Χ0Υ，则可以分别记录每张子图片的位置信息。比如最左侧的"时钟"子图片的位置信息 可以为：{(〇,〇)、256?1、260?1}，表明在整合图片中以（0,0)为端点、沿父轴方向取长度为 256px(像素）、沿Y轴方向取宽度为260px，即可获取该"时钟"子图片。再比如与"时钟" 子图片相邻的"笑脸"子图片的位置信息可以为：{(262, 137)、128、123}，表明在整合图片中 以（262, 137)为端点、沿X轴方向取长度为128px、沿Y轴方向取宽度为123px，即可获取该 "笑脸"子图片。
[0131] 在相关技术中，终端在展现该网页时，需要向服务器分别发送7次网页图片的获 取请求，以分别获取这7张独立图片。而在本公开的技术方案中，通过将这7张子图片整合 为一张整合图片，使得终端仅需要发送一次网页图片的获取请求，即可获取该整合图片，并 据此实现对网页中所有图片的展现。当然，图3仅示出了一种示例性的图片整合方式，而对 于多张子图片的整合，实际上可能存在很多种不同情况。因此，可以根据实际需求来确定采 用的整合方式。
[0132] 此外，本公开中的"相应位置"是指每张子图片在网页上被配置的展现位置，由浏 览器根据对网页文档（如HTML (HyperText Mark-up Language,超文本标记语言）文档）的 解析，即可确定每张子图片在网页上的展现位置。比如图3中，"时钟"子图片展现在网页的 右上角、"笑脸"子图片展现在网页的左上角等。
[0133] 如图4所示，图4示出了根据一示例性实施例示出的一种网页图片的展现方法的 流程图，该方法的实现步骤可以包括：
[0134] 在步骤401中，调用具有相同特征的子图片；
[0135] 在步骤402中，确定用于对所述子图片进行整合的整合方式；
[0136] 在本实施例中，作为一不例性实施例，由于多张子图片的每种整合方式，实际上都 可以通过相应的二叉树结构来进行表示，因而可以根据多张子图片对应的二叉树结构来确 定相应的整合方式。
[0137] 比如图5A中，以"图1"、"图2"和"图3"的整合为例，说明了二叉树结构与整合 方式之间的相互关系。首先，确定"图1"、"图2"和"图3"的数量，即共3张子图片；然后， 根据数量生成图5A左侧所示的二叉树结构，该结构中沿Y轴方向（即坚直方向）的线A将 "图1"与其他子图片之间分离，并通过沿X轴方向（即水平方向）的线B将"图2"和"图 3"之间分离；最后，基于上述的二叉树结构，即可生成图3B右侧所示的整合结果。
[0138] 类似地，如图5B所示，示出了对"图1"、"图2 "和"图3 "进行整合的另一整合方 式：在图5B左侧所示的二叉树结构中，通过沿Y轴方向的线A将"图1"与其他子图片之间 分离，并通过沿Y轴方向的线B将"图2"和"图3"之间分离，从而基于该二叉树结构，即可 生成图5B右侧所示的整合结果。
[0139] 在步骤403中，从整合方式中选择对子图片进行整合后占用面积最小的整合方 式；
[0140] 在本实施例中，结合图5A和图5B所示的实施例：根据每种二叉树结构，就可以确 定"图1"、"图2"和"图3"对应的整合图片（如图5A和图5B的右侧所示），并由此计算相 应的整合后占用面积。比如图5A中，整合后占用面积即"图1"、"图2"和"图3"的面积之 和；而在图5B中，整合后占用面积为虚线所示的矩形的面积，即三个"图1"的面积之和。因 此，图5A对应的整合方式可以被认为优于图5B对应的整合方式。
[0141] 在步骤404中，按照占用面积最小的整合方式将具有相同特征的子图片生成整合 图片，并记录每张子图片在整合图片中的位置信息。
[0142] 在本实施例中，通过比较各个整合方式对应的整合后占用面积的大小，从而可以 选出整合后占用面积最小的整合方式，并使得相应的整合图片的数据量最小，有助于缩短 整合图片的传输时间，加快相应网页的展现速度。
[0143] 其中，当所需整合的子图片的数量一定时，其对应的二叉树结构也能够确定。但 是，当子图片数量较大时，其对应的二叉树结构的数量将非常多，甚至远大于η ! (η为子图 片数量，η!表示η的阶乘）。因此，为了控制整合处理过程中的计算量，提高整合效率，可 以进一步采用下述方式：
[0144] 判断子图片的数量是否小于预设数量。其中，当子图片的数量小于预设数量时，通 过穷举方式确定多种整合方式，即列举出子图片对应的所有情况下的整合方式，并--确 定相应的整合后占用面积，以选择出占用面积最小的整合方式。同时，当子图片的数量大于 或等于预设数量时，可以通过贪心策略等确定多种整合方式。当采用贪心策略等方式时，每 次总考虑当前最优解，从而通过多次试探，能够得到有限个数的相对较优的整合方式，从而 能够在当前确定了的所有二叉树结构中，选择出整合后占用面积最小的整合方式。
[0145] 需要说明的是：
[0146] 在确定了最终所需要采用的整合方式后，本地设备执行对子图片的整合处理。在 整合处理的过程中，基于每张子图片的长、宽等参数，以及多张子图片之间的位置关系，即 可获取和记录每张子图片对应的位置信息，以用于最终的网页展现。
[0147] 此外，除了在服务器本地执行整合处理，还可以配置另一整合服务器，使其专用于 对子图片进行整合处理，则相应的处理步骤可以包括：将子图片上传至整合服务器；接收 整合服务器返回的整合图片和每张子图片的位置信息。
[0148] 其中，通过配置专用于子图片整合的整合服务器，有助于节省本地服务器的运算 资源。并且，当整合服务器的配置较高时，有助于提高对子图片的整合效率。其中，整合服 务器也可以采用图4所示的技术方案，确保选用整合后占用面积最小的整合方式，以减小 整合图片的数据量、提高整合图片的传输效率以及加快网页的展现速度。
[0149] 在步骤405中，当接收到终端发送的网页图片获取请求时，将整合图片和位置信 息发送至终端，以使终端根据位置信息将每张子图片呈现在网页的相应位置。
[0150] 在上述任一网页图片的展现方法的实施例中，还可以判断具有相同特征的子图片 与整合图片中包含的子图片是否匹配；若不匹配，则更新整合图片和位置信息，从而确保终 端获取的整合图片和位置信息总是最新数据，以使得呈现出最佳的网页展现效果。
[0151] 与前述的基于服务器侧的网页图片的展现方法的实施例相对应，本公开还提供了 用于服务器侧的网页图片的展现装置的实施例。
[0152] 图6是根据一示例性实施例示出的一种网页图片的展现装置的框图。如图6所示， 该展现装置包括：调用单元61、处理单元62和传输单元63。
[0153] 其中，调用单元61，被配置为调用具有相同特征的子图片；
[0154] 处理单元62,被配置将具有相同特征的子图片生成一张整合图片，并记录每张子 图片的位置信息；
[0155] 传输单元63,被配置为当接收到终端发送的网页图片获取请求时，将整合图片和 位置信息发送至终端，以使终端根据位置信息将每张子图片呈现在网页的相应位置。
[0156] 在上述实施例中，通过将每个网页中的所有图片（即子图片）生成为整合图片，使 得终端在请求网页图片时，可以通过获取整合图片而实现对所有图片的一次性获取，使得 对网页图片的请求次数不再关联于网页中包含图片的数量，有效降低了图片请求次数，有 助于降低对网络资源的占用，并加快网页的加载速度。
[0157] 如图7所示，图7是根据一示例性实施例示出的另一种网页图片的展现装置的框 图，该实施例在前述图6所示实施例的基础上，处理单元62可以包括：确定子单元621、选 择子单元622和生成子单元623。
[0158] 其中，确定子单元621，被配置为确定用于对子图片进行整合的整合方式；
[0159] 选择子单元622,被配置为从整合方式中选择对子图片进行整合后占用面积最小 的整合方式；
[0160] 生成子单元623,被配置为按照占用面积最小的整合方式将具有相同特征的子图 片生成为整合图片。
[0161] 在上述实施例中，通过比较各个整合方式对应的整合后占用面积的大小，从而可 以选出整合后占用面积最小的整合方式，并使得相应的整合图片的数据量最小，有助于缩 短整合图片的传输时间，加快相应网页的展现速度。
[0162] 当然，本领域技术人员可以理解的是：采用任意方式对子图片进行整合后，生成的 整合图片均能够适用于本公开的技术方案中。
[0163] 如图8所示，图8是根据一示例性实施例示出的另一种网页图片的展现装置的框 图，该实施例在前述图7所示实施例的基础上，确定子单元621可以包括：数量判断模块 621A和策略确定模块621B。
[0164] 其中，数量判断模块621A，被配置为判断子图片的数量是否小于预设数量；
[0165] 策略确定模块621B，被配置为在子图片的数量小于预设数量的情况下，通过穷举 方式确定多种整合方式；以及，在子图片的数量大于或等于预设数量的情况下，通过贪心策 略确定多种整合方式。
[0166] 在上述实施例中，通过针对不同情况而采用不同的策略，有助于在子图片数量较 少（比如小于预设数量）时，通过穷举方式来使得整合后占用面积最小；而在子图片数量较 多（比如大于或等于预设数量）时，通过如贪心策略等来减小运算量，并在得到的多种整合 方式中选择整合后占用面积相对最小的整合方式。
[0167] 如图9所示，图9是根据一示例性实施例示出的另一种网页图片的展现装置的框 图，该实施例在前述图6所示实施例的基础上，处理单元62可以包括：上传子单元624和接 收子单元625。
[0168] 其中，上传子单元624,被配置为将子图片上传至整合服务器；
[0169] 接收子单元625,被配置为接收整合服务器返回的整合图片和每张子图片的位置 信息。
[0170] 需要说明的是，上述图9所示的装置实施例中的获取单元62的结构也可以包含在 前述图6至图8任意一个装置实施例中，对此本公开不进行限制。
[0171] 在上述实施例中，通过配置专用于图片整合的整合服务器，有助于节省本地服务 器的运算资源。并且，当整合服务器的配置较高时，有助于提高对子图片的整合效率。
[0172] 如图10所示，图10是根据一示例性实施例示出的另一种网页图片的展现装置的 框图，该实施例在前述图6所示实施例的基础上，还可以包括：判断单元64和更新单元65。
[0173] 其中，判断单元64,被配置为判断所述具有相同特征的子图片与所述整合图片中 包含的子图片是否匹配；
[0174] 更新单元65,被配置为在不匹配的情况下，更新所述整合图片和所述位置信息。
[0175] 在上述实施例中，通过查看子图片与整合图片中包含的子图片之间的匹配关系， 及时更新整合图片和位置信息，以便确保在终端上实现最佳的网页呈现效果。
[0176] 上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的 实现过程，在此不再赘述。
[0177] 对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实 施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明 的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是 物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要 选择其中的部分或者全部模块来实现本公开方案的目的。本领域普通技术人员在不付出创 造性劳动的情况下，即可以理解并实施。
[0178] 相应的，本公开还提供一种网页图片的展现装置，包括：处理器；用于存储处理器 可执行指令的存储器；其中，处理器被配置为：调用具有相同特征的子图片；将所述具有相 同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；当接收到终端发送的 网页图片获取请求时，将整合图片和位置信息发送至终端，以使终端根据位置信息将每张 子图片呈现在网页的相应位置。
[0179] 相应的，本公开还提供一种服务器，服务器包括有存储器，以及一个或者一个以上 的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处 理器执行一个或者一个以上程序包含用于进行以下操作的指令：调用具有相同特征的子图 片；将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息；当 接收到终端发送的网页图片的获取请求时，将整合图片和位置信息发送至终端，以使终端 根据位置信息将每张子图片呈现在网页的相应位置。
[0180] 如图11所示，图11是根据一示例性实施例示出的一种用于网页图片的展现装置 的一结构示意图。例如，装置1100可以被提供为一服务器。参照图11，装置1100包括处理 组件1122,其进一步包括一个或多个处理器，以及由存储器1132所代表的存储器资源，用 于存储可由处理部件1122的执行的指令，例如应用程序。存储器1132中存储的应用程序 可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件1122被配置为 执行指令，以执行上述网页图片的展现方法。
[0181] 装置1100还可以包括一个电源组件1126被配置为执行装置1100的电源管理，一 个有线或无线网络接口 1150被配置为将装置1100连接到网络，和一个输入输出（I/O)接 口 1158。装置1100可以操作基于存储在存储器1132的操作系统，例如Windows ServerTM， Mac OS XTM，UnixTM, LinuxTM，FreeBSDTM 或类似。
[0182] 与前述的基于终端侧的网页图片的展现方法的实施例相对应，本公开还提供了基 于终端侧的网页图片的展现装置的实施例。
[0183] 如图12所示，图12是根据一示例性实施例示出的一种网页图片的展现装置的框 图，该展现装置可以包括：发送单元1201、接收单元1202和呈现单元1203。
[0184] 其中，发送单元1201，被配置为向服务器发送网页图片获取请求；
[0185] 接收单元1202,被配置为接收服务器返回的由具有相同特征的子图片生成的整合 图片，以及子图片的位置信息；
[0186] 呈现单元1203,被配置为根据位置信息将每张子图片呈现在网页的相应位置。
[0187] 在上述实施例中，仅需向服务器发起一次网页图片的获取请求，即可获取对应于 网页中的所有图片的整合图片，以用于根据该整合图片和相应的位置信息，将每张子图片 分别展现于网页中，从而减少了请求发送次数，有助于降低网络资源的占用、加快网页展现 速度。
[0188] 如图13所示，图13是根据一示例性实施例示出的另一种网页图片的展现装置的 框图，该实施例在前述图12所示实施例的基础上，呈现单元1203可以包括：获取子单元 1203A和显示子单元1203B。
[0189] 获取子单元1203A，被配置为根据位置信息从整合图片中获取每张子图片；
[0190] 显示子单元1203B，被配置为将获取的每张子图片显示在网页的相应位置。
[0191] 上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的 实现过程，在此不再赘述。
[0192] 对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实 施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明 的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是 物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要 选择其中的部分或者全部模块来实现本公开方案的目的。本领域普通技术人员在不付出创 造性劳动的情况下，即可以理解并实施。
[0193] 相应的，本公开还提供一种网页图片的展现装置，包括：处理器；用于存储处理器 可执行指令的存储器；其中，处理器被配置为：向服务器发送网页图片获取请求；接收服务 器返回的由具有相同特征的子图片生成的整合图片，以及每张子图片的位置信息；根据位 置信息将每张子图片呈现在网页的相应位置。
[0194] 相应的，本公开还提供一种终端，终端包括有存储器，以及一个或者一个以上的程 序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器 执行一个或者一个以上程序包含用于进行以下操作的指令：向服务器发送网页图片获取请 求；接收服务器返回的由具有相同特征的子图片生成的整合图片，以及子图片的位置信息； 根据位置信息将每张子图片呈现在网页的相应位置。
[0195] 如图14所示，图14是根据一示例性实施例示出的一种用于网页图片的展现装置 的一结构示意图。例如，装置1400可以是移动电话，计算机，数字广播终端，消息收发设备， 游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。
[0196] 参照图14,装置1400可以包括以下一个或多个组件：处理组件1402,存储器 1404,电源组件1406,多媒体组件1408,音频组件1410,输入/输出（I/O)的接口 812,传感 器组件1414,以及通信组件1416。
[0197] 处理组件1402通常控制装置1400的整体操作，诸如与显示，电话呼叫，数据通信， 相机操作和记录操作相关联的操作。处理元件1402可以包括一个或多个处理器1420来执 行指令，以完成上述的方法的全部或部分步骤。此外，处理组件1402可以包括一个或多个 模块，便于处理组件1402和其他组件之间的交互。例如，处理部件1402可以包括多媒体模 块，以方便多媒体组件1408和处理组件1402之间的交互。
[0198] 存储器1404被配置为存储各种类型的数据以支持在设备1400的操作。这些数据 的示例包括用于在装置1400上操作的任何应用程序或方法的指令，联系人数据，电话簿数 据，消息，图片，视频等。存储器1404可以由任何类型的易失性或非易失性存储设备或者它 们的组合实现，如静态随机存取存储器（SRAM)，电可擦除可编程只读存储器（EEPR0M)，可 擦除可编程只读存储器（EPROM)，可编程只读存储器（PR0M)，只读存储器（R0M)，磁存储器， 快闪存储器，磁盘或光盘。
[0199] 电源组件1406为装置1400的各种组件提供电力。电源组件1406可以包括电源 管理系统，一个或多个电源，及其他与为装置1400生成、管理和分配电力相关联的组件。
[0200] 多媒体组件1408包括在装置1400和用户之间的提供一个输出接口的屏幕。在一 些实施例中，屏幕可以包括液晶显示器（LCD)和触摸面板（TP)。如果屏幕包括触摸面板， 屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传 感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的 边界，而且还检测与触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件 1408包括一个前置摄像头和/或后置摄像头。当装置1400处于操作模式，如拍摄模式或视 频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和 后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。
[0201] 音频组件1410被配置为输出和/或输入音频信号。例如，音频组件1410包括一 个麦克风（MIC)，当装置1400处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦 克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器1404或 经由通信组件1416发送。在一些实施例中，音频组件1410还包括一个扬声器，用于输出音 频信号。
[0202] I/O接口 1412为处理组件1402和外围接口模块之间提供接口，上述外围接口模块 可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和 锁定按钮。
[0203] 传感器组件1414包括一个或多个传感器，用于为装置1400提供各个方面的状态 评估。例如，传感器组件1414可以检测到装置1400的打开/关闭状态，组件的相对定位，例 如组件为装置1400的显示器和小键盘，传感器组件1414还可以检测装置1400或装置1400 一个组件的位置改变，用户与装置1400接触的存在或不存在，装置1400方位或加速/减速 和装置1400的温度变化。传感器组件1414可以包括接近传感器，被配置用来在没有任何 的物理接触时检测附近物体的存在。传感器组件1414还可以包括光传感器，如CMOS或(XD 图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件1414还可以包括加 速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。
[0204] 通信组件1416被配置为便于装置1400和其他设备之间有线或无线方式的通信。 装置1400可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示 例性实施例中，通信部件1416经由广播信道接收来自外部广播管理系统的广播信号或广 播相关信息。在一个示例性实施例中，通信部件1416还包括近场通信（NFC)模块，以促进 短程通信。例如，在NFC模块可基于射频识别（RFID)技术，红外数据协会（IrDA)技术，超 宽带（UWB)技术，蓝牙（BT)技术和其他技术来实现。
[0205] 在示例性实施例中，装置1400可以被一个或多个应用专用集成电路（ASIC)、数字 信号处理器（DSP)、数字信号处理设备（DSPD)、可编程逻辑器件（PLD)、现场可编程门阵列 (FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。
[0206] 在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例 如包括指令的存储器1404,上述指令可由装置1400的处理器1420执行以完成上述网页图 片的展现方法。例如，非临时性计算机可读存储介质可以是ROM、随机存取存储器（RAM)、 ⑶-ROM、磁带、软盘和光数据存储设备等。
[0207] 此外，本公开还提供了：
[0208] 一种非临时性计算机可读存储介质，当存储介质中的指令由服务器的处理器执行 时，使得服务器能够执行一种网页图片的展现方法，方法包括：
[0209] 调用具有相同特征的子图片；
[0210] 将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信 息；
[0211] 当接收到终端发送的网页图片获取请求时，将整合图片和位置信息发送至终端， 以使终端根据位置信息将每张子图片呈现在网页的相应位置。
[0212] 可选的，将所述具有相同特征的子图片生成一张整合图片，包括：
[0213] 确定用于对所述子图片进行整合的整合方式；
[0214] 从所述整合方式中选择对所述子图片进行整合后占用面积最小的整合方式；
[0215] 按照所述占用面积最小的整合方式将所述具有相同特征的子图片生成所述整合 图片。
[0216] 可选的，确定用于对所述子图片进行整合的整合方式包括：
[0217] 判断所述子图片的数量是否小于预设数量；
[0218] 当所述子图片的数量小于预设数量时，通过穷举方式确定所述多种整合方式；以 及
[0219] 当所述子图片的数量大于或等于所述预设数量时，通过贪心策略确定所述多种整 合方式。
[0220] 可选的，将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的 位置信息，包括：
[0221] 将所述多张图片上传至整合服务器；
[0222] 接收所述整合服务器返回的所述整合图片和每张子图片的位置信息。
[0223] 可选的，还包括：
[0224] 判断所述具有相同特征的子图片与所述整合图片中包含的子图片是否匹配；
[0225] 若不匹配，则更新所述整合图片和所述位置信息。
[0226] -种非临时性计算机可读存储介质，当存储介质中的指令由终端的处理器执行 时，使得终端能够执行一种网页图片的展现方法，方法包括：
[0227] 向服务器发送网页图片获取请求；
[0228] 接收服务器返回的由具有相同特征的子图片生成的整合图片，以及每张子图片的 位置信息；
[0229] 根据位置信息将每张子图片呈现在网页的相应位置。
[0230] 可选的，根据所述位置信息将每张子图片呈现在网页的相应位置包括：
[0231] 根据所述位置信息从所述整合图片中获取每张子图片；
[0232] 将获取的每张子图片显示在网页的相应位置。
[0233] 本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其 它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或 者适应性变化遵循本公开的一般性原理并包括本公开未公开的本【技术领域】中的公知常识 或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的 权利要求指出。
[0234] 应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并 且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。
【权利要求】
1. 一种网页图片的展现方法，其特征在于，包括： 调用具有相同特征的子图片； 将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息； 当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位置信息发送至所 述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应位置。
2. 根据权利要求1所述的展现方法，其特征在于，将所述具有相同特征的子图片生成 一张整合图片，包括： 确定用于对所述子图片进行整合的整合方式； 从所述整合方式中选择对所述子图片进行整合后占用面积最小的整合方式； 按照所述占用面积最小的整合方式将所述具有相同特征的子图片生成所述整合图片。
3. 根据权利要求2所述的展现方法，其特征在于，确定用于对所述子图片进行整合的 整合方式包括： 判断所述子图片的数量是否小于预设数量； 当所述子图片的数量小于预设数量时，通过穷举方式确定所述多种整合方式，当所述 子图片的数量大于或等于所述预设数量时，通过贪心策略确定所述多种整合方式。
4. 根据权利要求1所述的展现方法，其特征在于，将所述具有相同特征的子图片生成 一张整合图片，并记录每张子图片的位置信息，包括： 将所述子图片上传至整合服务器； 接收所述整合服务器返回的所述整合图片和每张子图片的位置信息。
5. 根据权利要求1所述的展现方法，其特征在于，还包括： 判断所述具有相同特征的子图片与所述整合图片中包含的子图片是否匹配； 若不匹配，则更新所述整合图片和所述位置信息。
6. -种网页图片的展现方法，其特征在于，包括： 向服务器发送网页图片获取请求； 接收所述服务器返回的由具有相同特征的子图片生成的整合图片，以及所述子图片的 位置信息； 根据所述位置信息将每张子图片呈现在网页的相应位置。
7. 根据权利要求6所述的展现方法，其特征在于，根据所述位置信息将每张子图片呈 现在网页的相应位置包括： 根据所述位置信息从所述整合图片中获取每张子图片； 将获取的每张子图片显示在网页的相应位置。
8. -种网页图片的展现装置，其特征在于，包括： 调用单元，用于调用具有相同特征的子图片； 处理单元，用于将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片 的位置信息； 传输单元，用于当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位 置信息发送至所述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应 位置。
9. 根据权利要求8所述的展现装置，其特征在于，所述处理单元包括： 确定子单元，用于确定用于对所述子图片进行整合的整合方式； 选择子单元，用于从所述整合方式中选择对所述子图片进行整合后占用面积最小的整 合方式； 生成子单元，用于按照所述占用面积最小的整合方式将所述具有相同特征的子图片生 成为所述整合图片。
10. 根据权利要求9所述的展现装置，其特征在于，所述确定子单元包括： 数量判断模块，用于判断所述子图片的数量是否小于预设数量； 策略确定模块，用于在所述子图片的数量小于预设数量的情况下，通过穷举方式确定 所述多种整合方式，在所述子图片的数量大于或等于所述预设数量的情况下，通过贪心策 略确定所述多种整合方式。
11. 根据权利要求8所述的展现装置，其特征在于，所述处理单元包括： 上传子单元，用于将所述子图片上传至整合服务器； 接收子单元，用于接收所述整合服务器返回的所述整合图片和每张子图片的位置信 息。
12. 根据权利要求8所述的展现装置，其特征在于，还包括： 判断单元，用于判断所述具有相同特征的子图片与所述整合图片中包含的子图片是否 匹配； 更新单元，用于在不匹配的情况下，更新所述整合图片和所述位置信息。
13. -种网页图片的展现装置，其特征在于，包括： 发送单元，用于向服务器发送网页图片获取请求； 接收单元，用于接收所述服务器返回的由具有相同特征的子图片生成的整合图片，以 及所述子图片的位置信息； 呈现单元，用于根据所述位置信息将每张子图片呈现在网页的相应位置。
14. 根据权利要求13所述的展现装置，其特征在于，所述呈现单元包括： 获取子单元，用于根据所述位置信息从所述整合图片中获取每张子图片； 显示子单元，用于将获取的每张子图片显示在网页的相应位置。
15. -种网页图片的展现装置，其特征在于，包括： 处理器； 用于存储处理器可执行指令的存储器； 其中，所述处理器被配置为： 调用具有相同特征的子图片； 将所述具有相同特征的子图片生成一张整合图片，并记录每张子图片的位置信息； 当接收到终端发送的网页图片获取请求时，将所述整合图片和所述位置信息发送至所 述终端，以使所述终端根据所述位置信息将每张子图片呈现在网页的相应位置。
16. -种网页图片的展现装置，其特征在于，包括： 处理器； 用于存储处理器可执行指令的存储器； 其中，所述处理器被配置为： 向服务器发送网页图片的获取请求； 接收所述服务器返回的由具有相同特征的子图片生成的整合图片，以及所述子图片的 位置信息； 根据所述位置信息将每张子图片呈现在网页的相应位置。
【文档编号】G06F17/30GK104063424SQ201410240146
【公开日】2014年9月24日 申请日期:2014年5月30日 优先权日:2014年5月30日
【发明者】江岱霖, 任远, 漆昱恒 申请人:小米科技有限责任公司