展示目标对象的详情信息的方法及装置与流程

本申请涉及互联网技术领域，尤其涉及一种展示目标对象的详情信息的方法及装置。

背景技术：

随着智能时代的来临，移动客户端也越来越智能化，用户逐渐将获取各种对象的信息的渠道从传统的计算机终端(例如，台式电脑、笔记本电脑等)转移到移动客户端上(例如，智能手机、平板电脑等)。对象的详情信息是用户了解对象信息的一个重要板块。

对象的详情信息例如，当用户浏览图书馆网页上某本书的介绍时，网页上有“详情信息”的按钮。用户点击该“详情信息”的按钮，出现一个详情信息展示页面，其中一般有若干图片和文件说明，图片比如有书皮的图片、目录的图片、重要插图的图片等。现有技术中，当用户通过移动客户端点击该“详情信息”的按钮，是由服务器向客户端分别将这些图片缩放后连同文字分别发给移动客户端、由移动客户端根据这些缩放后的图片和文字进行渲染的。这样，由于对象的详情信息中一般有多张图片，要分别发送的话导致建立多次网络连接，造成加载缓慢。

技术实现要素：

本申请的一个目的是提供一种展示目标对象的详情信息的方法及装置，提高客户端加载目标对象的详情信息的速度。

根据本申请的一方面，在服务器端，提供了一种展示目标对象的详情信息的方法，所述目标对象的详情信息包含图片，该方法包括：接收客户端对目标对象的详情信息的访问请求；通过对包含所述图片的目 标对象的详情信息进行渲染，生成包含所述图片的详情信息展示页面的整图；向客户端返回包含所述图片的详情信息展示页面的整图。

根据本申请的一方面，在客户端，提供了一种展示目标对象的详情信息的方法，所述目标对象的详情信息包含图片，该方法包括：向服务器发送对目标对象的详情信息的访问请求；从服务器接收包含所述图片的详情信息展示页面的整图，而非所述图片；展示包含所述图片的详情信息展示页面的整图。

根据本申请的另一方面，在服务器端，还提供了一种展示目标对象的详情信息的装置，所述目标对象的详情信息包含图片，该装置包括：访问请求接收单元，接收客户端对目标对象的详情信息的访问请求；生成单元，通过对包含所述图片的目标对象的详情信息进行渲染，生成包含所述图片的详情信息展示页面的整图；返回单元，向客户端返回包含所述图片的详情信息展示页面的整图。

根据本申请的另一方面，在客户端，还提供了一种展示目标对象的详情信息的装置，所述目标对象的详情信息包含图片，该装置包括：访问请求发送单元，向服务器发送对目标对象的详情信息的访问请求；图接收单元，从服务器接收包含所述图片的详情信息展示页面的整图，而非所述图片；展示单元，展示包含所述图片的详情信息展示页面的整图。

由于本申请中，不是服务器端向客户端发送一个一个图片，由客户端渲染出详情信息展示页面，而是由服务器端渲染出包含一个一个图片的详情信息展示页面的整图发送给客户端，相比于现有技术中服务器分别发送一个一个图片，由客户端渲染的方式，大大减少了加载所需的连接次数，从而减小客户端加载目标对象的详情信息时的网络延迟，提高加载目标对象详情信息的速度。

另外，在本申请优选实施例中，服务器获取所述客户端的详情信息展示区域的大小，并根据所述详情信息展示区域的大小，将包含所述图片的详情信息展示页面的整图切分成至少一幅切分后展示页面图片，然后向所述客户端返回所述至少一幅切分后展示页面图片。也就是说， 详情信息展示页面的整图不一定是一次性传给客户端的，而是根据客户端的详情信息展示区域的大小分次传给客户端，避免了将整图一次传给客户端由于整图的信息过大导致传输延迟的问题。事实上，只要先将与客户端的详情信息展示区域的大小相当的详细信息传给客户端，以使客户端能在短时间内在整个详情信息展示区域显示出详情信息供用户观看，使用户尽可能快地看到一个满的详情信息展示区域是用户最希望的。当用户希望看到接下来的详情信息而拖动详情信息展示区域的上下左右移动的光标时，接下来的详细信息所在的那部分详情信息展示页面可能已在接下来的连接中加载到客户端了。通过这种方式，合理控制了服务器向客户端发送详情信息所用的连接数，在消耗的连接资源与用户体验之间良好折衷。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1为本申请一个实施例提供的在服务器端的方法的流程图；

图2为根据本申请一个实施例的在服务器端的向客户端返回包含所述图片的详情信息展示页面的整图的子流程图。

图3为本申请一个实施例提供的在客户端的方法的流程图；

图4为本申请另一个实施例提供的在客户端的方法的流程图；

图5为本申请另一个实施例中对包含图片的详情信息展示页面进行处理的详细示意图；

图6为本申请一个实施例提供的在服务器端的装置的框图；

图7为本申请一个实施例的返回单元的子框图；

图8为本申请一个实施例提供的在客户端的装置的框图；

图9为本申请另一个实施例提供的在客户端的装置的框图。

附图中相同或相似的附图标记代表相同或相似的部件。

具体实施方式

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作描述成顺序的处理，但是其中的许多操作可以被并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

在上下文中所称“计算机设备”，也称为“电脑”，是指可以通过运行预定程序或指令来执行数值计算和/或逻辑计算等预定处理过程的智能电子设备，其可以包括处理器与存储器，由处理器执行在存储器中预存的存续指令来执行预定处理过程，或是由ASIC、FPGA、DSP等硬件执行预定处理过程，或是由上述二者组合来实现。计算机设备包括但不限于服务器、个人电脑、笔记本电脑、平板电脑、智能手机等。

所述计算机设备包括用户设备与网络设备。其中，所述用户设备包括但不限于电脑、智能手机、PDA等；所述网络设备包括但不限于单个网络服务器、多个网络服务器组成的服务器组或基于云计算(Cloud Computing)的由大量计算机或网络服务器构成的云，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个超级虚拟计算机。其中，所述计算机设备可单独运行来实现本申请，也可接入网络并通过与网络中的其他计算机设备的交互操作来实现本申请。其中，所述计算机设备所处的网络包括但不限于互联网、广域网、城域网、局域网、VPN网络等。

需要说明的是，所述用户设备、网络设备和网络等仅为举例，其他现有的或今后可能出现的计算机设备或网络如可适用于本申请，也应包含在本申请保护范围以内，并以引用方式包含于此。

后面所讨论的方法(其中一些通过流程图示出)可以通过硬件、软件、固件、中间件、微代码、硬件描述语言或者其任意组合来实施。当用软件、固件、中间件或微代码来实施时，用以实施必要任务的程序代码或代码段可以被存储在机器或计算机可读介质(比如存储介 质)中。(一个或多个)处理器可以实施必要的任务。

这里所公开的具体结构和功能细节仅仅是代表性的，并且是用于描述本申请的示例性实施例的目的。但是本申请可以通过许多替换形式来具体实现，并且不应当被解释成仅仅受限于这里所阐述的实施例。

应当理解的是，虽然在这里可能使用了术语“第一”、“第二”等等来描述各个单元，但是这些单元不应当受这些术语限制。使用这些术语仅仅是为了将一个单元与另一个单元进行区分。举例来说，在不背离示例性实施例的范围的情况下，第一单元可以被称为第二单元，并且类似地第二单元可以被称为第一单元。这里所使用的术语“和/或”包括其中一个或更多所列出的相关联项目的任意和所有组合。

这里所使用的术语仅仅是为了描述具体实施例而不意图限制示例性实施例。除非上下文明确地另有所指，否则这里所使用的单数形式“一个”、“一项”还意图包括复数。还应当理解的是，这里所使用的术语“包括”和/或“包含”规定所陈述的特征、整数、步骤、操作、单元和/或组件的存在，而不排除存在或添加一个或更多其他特征、整数、步骤、操作、单元、组件和/或其组合。

还应当提到的是，在一些替换实现方式中，所提到的功能/动作可以按照不同于附图中标示的顺序发生。举例来说，取决于所涉及的功能/动作，相继示出的两幅图实际上可以基本上同时执行或者有时可以按照相反的顺序来执行。

下面结合附图对本申请作进一步详细描述。

图1为本申请一个实施例的展示目标对象的详情信息的方法1的流程图。

目标对象就是用户通过客户端请求访问或正在访问的对象。目标对象例如可以为商品、广告、音频、视频、新闻、文档或其他类型的对象。目标对象的详情信息包括图片、文字等信息。例如，在前述图书馆网页的例子中，详细信息是用户点击图书馆网页上某图书的“详情信息”的按钮后出现的该图书的详情信息展示页面，其中一般有若 干图片和文件说明，图片比如有书皮的图片、目录的图片、重要插图的图片等。再例如，对于新闻来说，详情信息是用户点击网页上该新闻旁边的“详情信息”的按钮后出现的该新闻的详情信息，其中可能包括该新闻中当事人的照片等。再例如，对于购物网站来说，详情信息是用户点击网页上某商品标识旁的“详情信息”的按钮后出现的该商品的详细介绍，包括例如商品的图片和其各部分的图片、用途说明等。

参考图1，在步骤110中，接收客户端对目标对象的详情信息的访问请求。

例如，对于新闻来说，用户通过客户端点击网页上新闻旁边的“详情信息”的按钮，服务器就接收到客户端对该新闻的详情信息的访问请求。

或者，可以规定用户执行了特定操作，就向服务器发起了对目标对象的详情信息的访问请求。例如，可以将双击目标对象标题的操作作为发起对目标对象的详情信息的访问请求的触发。或者，可以将拖动目标对象显示页面到达底部时继续进行拖动的操作作为发起对目标对象的详情信息的访问请求的触发。

在步骤120中，通过对包含所述图片的目标对象的详情信息进行渲染，生成包含所述图片的详情信息展示页面的整图。

本申请与现有技术的一个区别在于，本申请的实施例中，是由服务器端完成渲染以生成详情信息展示页面供显示的。

具体地，可以通过执行目标对象的详情信息的原始代码(即，该目标对象在网页显示时的代码)进行页面渲染，例如，用CSS代码或JS代码编写的关于该目标对象的详情信息显示在展示页面中的颜色、背景、字体、位置等的语句)对该目标对象的详情信息进行渲染，生成该目标对象的详情信息展示页面。其中，生成的详情信息展示页面中包含目标对象的图片、文字等信息。

然后，可以通过对生成的详情信息展示页面的整个页面进行截图的方式，生成详情信息展示页面的整图，该整图中有该目标对象所有的详 情信息。该整图中有图片、文字等。如图5中，301表示一个整图，310、311表示整图上的两个图片，在整图301上没有图片310、311的地方是一些介绍性的文字。在目标对象是一件衣服的情况下，图片310、311例如是衣服的照片和人穿该衣服的效果图，在整图301上没有图片310、311的地方是对该衣服的尺寸、产地等的介绍。

步骤120不一定在步骤110后执行，也可以事先执行通过对包含所述图片的目标对象的详情信息进行渲染，生成包含所述图片的详情信息展示页面的整图，在接收到访问请求后，对事先生成的整图进行调取。

在步骤130中，向客户端返回包含所述图片的详情信息展示页面的整图。

在一种实施方式中，直接向客户端返回包含所述图片的详情信息展示页面的整图。

在另一种实施方式中，步骤130包括步骤1301、步骤1302、步骤1303。

在步骤1301中，获取所述客户端的详情信息展示区域的大小。

所述客户端的详情信息展示区域大小可以为该客户端的详情信息展示区域的宽高像素，也就是该详情信息展示区域的分辨率，即，水平方向的像素数×垂直方向的像素数。其中，该客户端的详情信息展示区域宽度为水平方向的像素数，高度为垂直方向的像素数。例如，一个客户端的详情信息展示区域的分辨率为300×400，也就是说，该客户端的详情信息展示区域的宽度为300个像素，高度为400个像素。

如图5所示，并非整个用户终端307的表面部分都是详情信息展示区域。用户终端307的表面部分有边框或硬键盘等，不能用来显示。另外，并非整个显示区(308，309)都是详情信息展示区域。例如，308处可能显示一个标题，例如“详情信息”，只有在309处才能够显示详情信息。因此，309是一个详情信息展示区域。

在一种实施方式中，服务器向客户端发送查询所述客户端的详情信息展示区域的大小的请求，然后接收来自客户端的所述详情信息展示区域的大小。

在另一种实施方式中，不用服务器向客户端发送查询所述客户端的详情信息展示区域的大小的请求，而是在步骤110中，客户端向服务器发访问请求中，该访问请求中就带有所述客户端的详情信息展示区域的大小，节省了服务器查询的操作，提高了效率。

在另一种实施方式中，还可以在服务器中预先存储每个客户端对应的详情信息展示区域的大小，此时就不用服务器再向客户端查询，而是直接获取预存的与所述客户端对应的详情信息展示区域的大小。

在步骤1302中，根据所述详情信息展示区域的大小，将包含所述图片的详情信息展示页面的整图切分成至少一幅切分后展示页面图片。

在一种实施方式中，步骤1302包括：

-根据所述详情信息展示区域的宽度，对包含所述图片的详情信息展示页面的整图的宽度和高度进行等比缩放，以生成宽度与所述详情信息展示区域的宽度相同的待切分的整图。

具体地，根据所述详情信息展示区域的水平像素数，将所述详情信息展示页面的整图的水平像素数和垂直像素数进行等比缩放，以生成水平像素数与所述详情信息展示区域的水平像素数相同的待切分的整图。更具体而言，就是将该详情信息展示页面的整图的水平像素数缩放至与该详情信息展示区域的水平像素数相同，并将该详情信息展示图片的垂直像素数按照该相同比例进行缩放，从而生成水平像素数与该详情信息展示区域的水平像素数相同的待切分的整图。

如图5所示，详情信息展示页面的整图301的大小为600×2000(水平600个像素，垂直2000个像素)，该客户端的详情信息展示区域309的大小为300×400，则根据该客户端的详情信息展示区域的水平像素数300，将该详情信息展示页面的整图的水平像素数和垂直像素数进行等比缩放，生成大小为300×1000的待切分的整图302。

-根据所述详情信息展示区域的高度对所述待切分的整图进行切分，以生成至少一幅切分后展示页面图片。

具体地说，根据所述详情信息展示区域的垂直像素数，对所述待切分的整图进行切分，以生成至少一幅切分后的展示页面图片，该至少一 幅切分后的展示页面图片的水平像素数都与该客户端的详情信息展示区域的水平像素数相同。具体地，可以根据该详情信息展示区域的垂直像素数，沿垂直方向将该待切分的整图切分成垂直像素数与该详情信息展示区域的垂直像素数相同的若干切分后的展示页面图片，以及还可能有一幅垂直像素数小于该详情信息展示区域的垂直像素数的切分后的展示页面图片。由于存在详情信息展示页面的整图的垂直像素数不为该客户端的详情信息展示区域的垂直像素数的整数倍的情况，因此，切分后生成的切分后展示页面图片中可能包含至少一幅垂直像素数小于该详情信息展示区域的垂直像素数的切分后的展示页面图片。

仍以前述生成大小为300×1000的待切分的整图302为例，由于该详情信息展示区域309的垂直像素数为400，对生成的待切分的整图302进行切分，可以得到2幅大小为300×400和1幅大小为300×200切分后的展示页面图片304、305、306，如图5所示。

在步骤1303中，向所述客户端返回所述至少一幅切分后展示页面图片。

在一种实施方式中，在每个连接中向客户端返回所述至少一幅切分后展示页面图片的一幅切分后展示页面图片。

例如，如图5所示，分别在连接1-3中向客户端返回切分后的展示页面图片304、305、306。

向所述客户端返回所述多幅切分后的展示页面图片时，可以先向该客户端按顺序先返回第一幅切分后的展示页面图片。当用户选择继续访问余下的切分后的展示页面图片时，再根据用户指令返回余下的切分后的展示页面图片。例如，可以先响应客户端的访问请求返回第一幅切分后的展示页面图片，此时，该客户端浏览器将该第一幅切分后的展示页面图片显示在该客户端的详情信息展示区域。当用户拖动显示在详情信息展示区域的第一幅切分后的展示页面图片时，向用户返回第二幅切分后的展示页面图片，以此类推。如果用户不选择继续访问余下的切分后的展示页面图片，则可以不向用户返回余下的切分后的展示页面图片，从而减少网络连接次数。

如图3所示，根据本申请的一个实施例，还提供了在客户端的一种展示目标对象的详情信息的方法2，所述目标对象的详情信息包含图片，该方法2包括步骤210-230。该方法2是与图1中的方法1配合使用的。

在步骤210中，向服务器发送对目标对象的详情信息的访问请求。

在步骤220中，从服务器接收包含所述图片的详情信息展示页面的整图。

也就是说，由服务器完成所有详情信息的渲染，形成一个整图。客户端接到的是渲染好的整图。

在步骤230中，展示包含所述图片的详情信息展示页面的整图。

由于该方法2是与图1中的方法1配合使用的，在方法1中对上述实现细节进行详细的描述，因此，可以参考方法1中与上述过程相关的描述来理解以上步骤。

如图4所示，根据本申请的一个实施例，还提供了在客户端的一种展示目标对象的详情信息的方法2。与图3的方法2相比，它增加了步骤213、步骤217。

在步骤213中，从服务器接收查询所述客户端的详情信息展示区域的大小的请求。

在步骤217中，向服务器发送客户端的所述详情信息展示区域的大小。

另外，所述从服务器接收包含所述图片的详情信息展示页面的整图的步骤220包括：步骤2201，从服务器接收根据客户端的详情信息展示区域的大小将所述整图切分成的至少一幅切分后展示页面图片。具体地说，在每个连接中从服务器接收至少一幅切分后展示页面图片中的一幅切分后展示页面图片。

所述展示包含所述图片的详情信息展示页面的整图的步骤230包括：步骤2301，展示所述至少一幅切分后展示页面图片。

另外，也可以不通过步骤213、217来通知服务器客户端的所述详情信息展示区域的大小，而是在所述访问请求中含有所述客户端的详情信 息展示区域的大小，这样就在访问请求中通知了服务器详情信息展示区域的大小，减少了连接。

基于与方法同样的发明构思，在服务端，本申请还提供一种展示目标对象的详情信息的装置，所述目标对象的详情信息包含图片，图6所示为该装置4的框图。该装置4包括：

访问请求接收单元410，接收客户端对目标对象的详情信息的访问请求；

生成单元420，通过对包含所述图片的目标对象的详情信息进行渲染，生成包含所述图片的详情信息展示页面的整图；

返回单元430，向客户端返回包含所述图片的详情信息展示页面的整图。

图7所示为返回单元430的子框图。

参考图7，可选地，返回单元430包括：

获取子单元4301，获取所述客户端的详情信息展示区域的大小；

切分子单元4302，根据所述详情信息展示区域的大小，将包含所述图片的详情信息展示页面的整图切分成至少一幅切分后展示页面图片；

返回子单元4303，向所述客户端返回所述至少一幅切分后展示页面图片。

可选地，切分子单元4302被配置为：

根据所述详情信息展示区域的宽度，对包含所述图片的详情信息展示页面的整图的宽度和高度进行等比缩放，以生成宽度与所述详情信息展示区域的宽度相同的待切分的整图；

根据所述详情信息展示区域的高度对所述待切分的整图进行切分，以生成至少一幅切分后展示页面图片。

可选地，返回子单元4303被配置为：在每个连接中向客户端返回所述至少一幅切分后展示页面图片的一幅切分后展示页面图片。

可选地，获取子单元4301被配置为：

向客户端发送查询所述客户端的详情信息展示区域的大小的请求；

接收来自客户端的所述详情信息展示区域的大小。

可选地，客户端对目标对象的详情信息的访问请求中带有所述客户端的详情信息展示区域的大小，

获取子单元4301被配置为：从所述访问请求中获取所述客户端的详情信息展示区域的大小。

可选地，获取子单元4301被配置为：

获取预存的与所述客户端对应的详情信息展示区域的大小。

基于与方法同样的发明构思，在客户端，本申请还提供一种的展示目标对象的详情信息的装置，所述目标对象的详情信息包含图片，图8所示为该装置5的框图。该装置5包括：

访问请求发送单元510，向服务器发送对目标对象的详情信息的访问请求；

图接收单元520，从服务器接收包含所述图片的详情信息展示页面的整图，而非所述图片；

展示单元530，展示包含所述图片的详情信息展示页面的整图。

可选地，所述图接收单元520被配置为：从服务器接收根据客户端的详情信息展示区域的大小将所述整图切分成的至少一幅切分后展示页面图片，

所述展示单元530被配置为：展示所述至少一幅切分后展示页面图片。

可选地，所述图接收单元520被配置为：

在每个连接中从服务器接收至少一幅切分后展示页面图片中的一幅切分后展示页面图片。

图9为根据本申请另一个实施例的在客户端的装置的结构框图。可选地，该装置5还包括：

请求接收单元513，从服务器接收查询所述客户端的详情信息展示区域的大小的请求；

展示区域大小发送单元517，向服务器发送客户端的所述详情信息展示区域的大小。

可选地，在所述访问请求中含有所述客户端的详情信息展示区域的大小。

需要注意的是，本申请可在软件和/或软件与硬件的组合体中被实施，例如，本申请的各个装置可采用专用集成电路(ASIC)或任何其他类似硬件设备来实现。在一个实施例中，本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，RAM存储器，磁或光驱动器或软磁盘及类似设备。另外，本申请的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。

对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

虽然前面特别示出并且描述了示例性实施例，但是本领域技术人员将会理解的是，在不背离权利要求书的精神和范围的情况下，在其形式和细节方面可以有所变化。