CN104636106A - 图片显示方法和装置、终端设备 - Google Patents

Abstract

本公开是关于一种图片显示方法和装置、终端设备，其中方法包括：接收页面滚动触发的对于目标图片的图片请求；将原始尺寸的目标图片解码成缩略图进行显示。本公开实现了随着页面滚动进行快速图片显示。

Description

图片显示方法和装置、终端设备

技术领域

本公开涉及网络技术，尤其涉及图片显示方法和装置、终端设备。

背景技术

相关技术中，用户查看的页面中可能会包括大量的联合图像专家小组(JointPhotographic Experts Group，简称：JPEG)图片，并且当进行页面快速滚动时，页面也需要尽快加载进入可视区域内的图片，以显示给用户。

发明内容

本公开提供一种图片显示方法和装置、终端设备，以实现随着页面滚动进行快速图片显示。

根据本公开实施例的第一方面，提供一种图片显示方法，包括：

接收页面滚动触发的对于目标图片的图片请求；

将原始尺寸的目标图片解码成缩略图进行显示。

根据本公开实施例的第二方面，提供一种图片显示装置，包括：

请求接收模块，用于接收页面滚动触发的对于目标图片的图片请求；

图片显示模块，用于将原始尺寸的目标图片解码成缩略图进行显示。

根据本公开实施例的第三方面，提供一种终端设备，包括：

处理器；

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

其中，所述处理器被配置为：接收页面滚动触发的对于目标图片的图片请求；将原始尺寸的目标图片解码成缩略图进行显示。

本公开的实施例提供的技术方案可以包括以下有益效果：通过在接收到图片请求时，将原始尺寸的图片解码成缩略图再显示，由于缩略图的生成耗时相比于原始图将大大缩短，从而实现随着页面滚动进行快速图片显示。

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

附图说明

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

图1是根据一示例性实施例示出的一种图片显示方法的应用场景一；

图2是根据一示例性实施例示出的一种图片显示方法的应用场景二；

图3是根据一示例性实施例示出的一种图片显示方法的流程图；

图4是根据一示例性实施例示出的一种图片显示方法的原理图；

图5是根据一示例性实施例示出的一种图片显示装置的框图；

图6是根据一示例性实施例示出的另一种图片显示装置的框图；

图7是根据一示例性实施例示出的一种终端设备的框图。

具体实施方式

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

随着互联网的普及和发展，人们经常浏览各种网页，并且可以通过多种设备浏览网页，例如，可以在电脑上通过浏览器打开网页，或者在智能手机上通过下载的应用客户端浏览网页。不论哪种方式浏览网页，都包括其中一种类型的网页页面，即图片列表页面，该页面中包括大量的图片，比如，可以是视频资源列表图片、风景展示图片、服装列表图片等。

本公开实施例的图片显示方法，即为如何显示图片列表页面中的图片。参见图1所示例的场景，图1是以智能手机为例，用户可以在手机上通过视频应用的客户端，浏览视频资源的列表页面，该页面中要显示大量的图片，例如图1示例的，页面中显示图片A至图片F，并且假设该手机是触屏手机，手机屏幕只能显示页面的其中一部分，那么在屏幕上显示的页面部分可以称为“可视区域”，当用户想要查看页面的其他部分时，就可以进行触屏页面滚动，即用户可以使用手指11沿着点线箭头12所示的方向在手机屏幕13上滑动，就可以触发页面滚动，使得页面的其他部分也显示在可视区域。

图2是以电脑为例，用户还可以在电脑21上通过浏览器浏览页面，页面中包括很多图片，例如图2中所示的图片a至图片d，同样的，用户也可以滚动页面，使得页面的其他部分图片进入可视区域中显示。只是在这种方式下，用户滚动页面的方式可以是通过鼠标滚轮触发页面滚动。参见图2示例，用户可以用手滚动鼠标22的滚轮23，使得在电脑上的页面中的滚动条24沿着点线箭头25的方向向下移动，从而进行页面滚动。当然除了图1和图2所示的例子，用户也可以使用其他设备，采用其他方式进行页面浏览，都可以执行滚动图片列表页面的操作。

在上述的图片页面的滚动过程中，该页面需要及时的将进入到可视区域的图片显示出来，但是通常图片比较大(例如，JPEG图片)，图片的解码加载过程比较耗时，如果不能及时的将图片显示在可视区域的页面，从用户看来就是出现了卡顿、页面空白、滚动效果不连贯等问题，使得图片页面的滚动效果不佳。而本公开实施例的图片显示方法，将可以实现随着页面滚动进行快速图片显示，达到一个较理想的滚动可视效果。

图3示例了本公开实施例的图片显示方法的流程图，包括：

301、接收页面滚动触发的对于目标图片的图片请求；

302、将原始尺寸的目标图片解码成缩略图进行显示。

其中，图3的流程可以是客户端执行，该客户端是查看页面的客户端，比如，若用户在自己的智能手机上使用视频客户端浏览视频图片页面，那么该视频客户端就是执行图3所示流程的客户端。在步骤301中，接收到的图片请求是在用户进行页面滚动时触发的。

例如，仍以图1和图2为例，当用户进行触屏页面滚动时，比如用手指滑动屏幕，实际上是请求查看页面中下一部分的图片，该下一部分图片即排在当前可视区域页面之后的下一个要进入可视区域的页面部分，将该下一页面部分的图片显示在当前可视区域内。当客户端检测到用户执行了划屏页面滚动操作时，相当于接收到了对下一页面部分的图片请求，请求在可视区域显示下一页面部分中的图片，这些图片可以称为目标图片。同理，当用户在电脑上滚动鼠标进行页面滚动时，客户端检测到用户在滚动滚动条，也是相当于接收到了对下一个要进入可视区域的页面部分的图片请求，请求显示目标图片。

客户端在接收到301中的图片请求后，在302中将原始尺寸的目标图片解码成缩略图，并将所述缩略图拉伸至原始尺寸进行显示。参见图4的示例原理，客户端41是要进行页面显示的客户端，服务器42是存储图片的服务器，假设客户端侧的页面显示的图片都在服务器42存储(当然图片也可以是存储在客户端本地)，在302中处理的原始尺寸的目标图片也是存储在服务器42，这里的原始尺寸指的是图片在页面中显示的尺寸(包括图片的长度和宽度信息)。

客户端由服务器42获取原始尺寸的目标图片的时间，可以是在接收到图片请求时，或者是在接收到图片请求之前都可以。比如，客户端在接收到图片请求时，再根据目标图片的地址信息(例如，在执行页面显示代码时，包括哪部分页面显示哪些图片的信息，该地址信息是图片在服务器侧的存储地址)向服务器42请求获取图片，服务器将存储的原始尺寸的目标图片发送至客户端用于执行302。或者，客户端还可以在接收到图片请求之前就获取图片，比如，用户在浏览某个页面，但是并未点击要打开页面中的图片列表链接，但是客户端可以预先将这些图片从服务器获取下来，做好用户查看的准备。

继续结合图4的示例，客户端41可以将原始尺寸的目标图片存储在存储资源43中，该存储资源43例如是电脑硬盘中的某个存储空间，或者手机的存储器等。需要说明的是，服务器42发给客户端41的目标图片可以是编码后的图片，本实施例中，当客户端接收到301中的图片请求时，才将目标图片由存储资源43中取出，放入内存44中，对图片进行解码(或者，解码后的图片可以进一步发送至显存)，然后显示模块45才将解码后的图片显示在页面上。

本实施例中，客户端在内存44中解码图片时，不生成原始尺寸的目标图片，而是生成一个尺寸比原始尺寸小的缩略图，例如，可以解码成一个长度和宽度均为原始尺寸的1/2、1/4或者1/8的缩略图。这样显示模块45在页面滚动过程中将图片显示在页面时，可以将该缩略图拉伸至期望尺寸的大小显示在页面，这里的显示是在页面滚动过程中显示，并且期望尺寸例如是原始尺寸，或者也可以是缩略图本身等显示方式。

需要说明的是，如上述描述的图片显示过程中，客户端在接收到页面滚动触发的对目标图片的图片请求时，才开始解码目标图片，这里的目标图片不是整个页面包括的所有图片，而是相当于一种随页面滚动过程中的实时图片请求。举例如下：假设整个页面共有100张图片，用户在浏览页面时，看完当前可视区域内的图片后，用户可以滚动页面上的滚动条，该页面滚动过程触发的是对下一页面部分中的图片标识为20-40的这些图片的请求，也就是说，随着页面滚动，图片标识为20-40的这些图片将进入可视区域，则这些图片称为目标图片。客户端将开始解码图片标识为20-40的图片，并且解码为缩略图；待下一次用户若再次进行页面滚动，触发对图片标识为41-50的目标图片的请求时，再解码图片标识为41-50的目标图片为缩略图。可见，本公开实施例中的目标图片为“页面滚动触发的对于目标图片的图片请求”，即目标图片是页面滚动触发的请求图片。

此外，本公开实施例的客户端在对目标图片进行解码时，可以是各个图片单独进行解码，比如上述的，在对图片标识为41-50的目标图片解码缩略图时，单独执行对标识为41的图片的解码，单独执行对标识为42的图片的解码等等，即各个图片的解码单独进行。并且，当目标图片(例如，图片标识为41的目标图片)不再显示在可视区域时，客户端可以将图片移出内存或显存，减少对内存或显存的占用。

还需要说明的是，上述解码生成的缩略图，是用于滚动过程中的显示，在用户进行页面滚动的过程中，可以将上述解码生成的缩略图拉伸至期望的尺寸(例如，原始尺寸)后，显示在可视区域。当页面滚动停止时，或者停止预定的时间(如，1秒)后，再将可视区域内的上述拉伸后的缩略图片替换成按照原始尺寸解码的图片。也就是说，客户端要执行两个解码过程，一个是将目标图片解码成缩略图，并拉伸显示在可视区域，这是页面滚动过程中显示的，是为了尽快的让用户看到图片，不会出现页面卡顿等现象；另一个解码过程是客户端仍然要将目标图片解码成原始尺寸，并在页面滚动停止时替换上述的拉伸缩略图，因为按照原始尺寸解码的图片比缩略图更加清楚。并且，客户端可以仅将“当页面滚动停止时最终要显示在可视区域内的图片”按照原始尺寸解码并进行上述图片替换，客户端可以检测到页面滚动停止时哪些图片会最终显示在可视区域内。

本公开实施例的图片显示方法，一方面，由于在对图片进行解码时，解码成尺寸较小的缩略图，生成该缩略图的消耗时间较解码成原始尺寸图片的时间将大大缩短，例如，JPEG格式图片生成缩略图时的时间是生成原始尺寸图片时间的几分之一甚至是十分之一(当然并不限于JPEG图片，只要缩略图生成时间相较原始图生成时间大幅缩短的图片都可以)，进而也使得在接收到图片请求后至图片显示的消耗时间减少，提高了图片显示效率，使得在页面滚动过程中能够及时的显示图片，避免出现页面卡顿影响页面显示效果；另一方面，由于是在接收到图片请求时才将图片放入内存中解码(或者放入显存)，那么即使提前将图片由服务器下载，也不会增加对内存或显存的占用；再一方面，对于服务器来说，服务器只需要将原始尺寸的图片发给客户端即可，由客户端来执行解码生成缩略图，节省了服务器侧的处理资源。

图5是根据一示例性实施例示出的一种图片显示装置的框图，该装置中的各个模块执行操作的具体方式已经在有关方法的实施例中进行了详细描述，此处将不做详细阐述说明。参照图5，该装置包括请求接收模块51和图片显示模块52；其中，

请求接收模块51，用于接收页面滚动触发的对于目标图片的图片请求；

图片显示模块52，用于将原始尺寸的目标图片解码成缩略图进行显示。

进一步的，请求接收模块51，用于接收通过鼠标滚轮触发的页面滚动对应的图片请求，或者，接收触屏页面滚动触发的图片请求。

图6是根据一示例性实施例示出的另一种图片显示装置的框图，该装置还可以包括：图片获取模块53，用于由服务器获取所述原始尺寸的目标图片。例如，该目标图片的数量为至少一个。

图7是根据一示例性实施例示出的一种终端设备800的框图。例如，终端设备800可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图7，装置800可以包括以下一个或多个组件：处理组件702，存储器704，电源组件706，多媒体组件708，音频组件710，输入/输出(I/O)的接口712，传感器组件714，以及通信组件716。

处理组件702通常控制装置700的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件702可以包括一个或多个处理器720来执行指令，以完成上述的方法的全部或部分步骤，该处理器被配置为：接收页面滚动触发的对于目标图片的图片请求；将原始尺寸的目标图片解码成缩略图进行显示。此外，处理组件702可以包括一个或多个模块，便于处理组件702和其他组件之间的交互。例如，处理部件702可以包括多媒体模块，以方便多媒体组件708和处理组件702之间的交互。

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

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

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

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

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

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

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

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

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

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

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

Claims (10)

1.一种图片显示方法，其特征在于，包括：

接收页面滚动触发的对于目标图片的图片请求；

将原始尺寸的目标图片解码成缩略图进行显示。

2.根据权利要求1所述的方法，其特征在于，所述接收页面滚动触发的对于目标图片的图片请求，包括：

接收通过鼠标滚轮触发的页面滚动对应的图片请求；

或者，接收触屏页面滚动触发的图片请求。

3.根据权利要求1所述的方法，其特征在于，所述将原始尺寸的目标图片解码成缩略图之前，还包括：由服务器获取所述原始尺寸的目标图片。

4.根据权利要求4所述的方法，其特征在于，所述目标图片的数量为至少一个。

5.根据权利要求1所述的方法，其特征在于，所述缩略图，包括如下任意一种：1/2、1/4或者1/8的缩略图。

6.一种图片显示装置，其特征在于，包括：

请求接收模块，用于接收页面滚动触发的对于目标图片的图片请求；

图片显示模块，用于将原始尺寸的目标图片解码成缩略图进行显示。

7.根据权利要求6所述的装置，其特征在于，

所述请求接收模块，用于接收通过鼠标滚轮触发的页面滚动对应的图片请求，或者，接收触屏页面滚动触发的图片请求。

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

图片获取模块，用于由服务器获取所述原始尺寸的目标图片。

9.根据权利要求8所述的装置，其特征在于，所述目标图片的数量为至少一个。

10.一种终端设备，其特征在于，包括：

处理器；

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

其中，所述处理器被配置为：接收页面滚动触发的对于目标图片的图片请求；将原始尺寸的目标图片解码成缩略图进行显示。