CN102253942B - 一种图片的显示方法和设备 - Google Patents

Abstract

本发明提供一种图片的显示方法和设备，包括以下步骤：获取待显示图片对应的缩略图信息和原图信息；根据所述原图信息显示所述缩略图，并在所述缩略图上逐步显示所述原图。本发明中，通过将缩略图和原图同时加载并叠加显示的方法，使得用户能够第一时间看到图片的大概情况，并尽可能快的看到清晰的原图。从而实现了用户看到的照片是一个从模糊到清晰的动态过程，满足了用户查看图片的需求，提高了用户的体验。

Description

一种图片的显示方法和设备

技术领域

本发明涉及网络技术领域，特别是涉及一种图片的显示方法和设备。

背景技术

随着Internet的迅速发展，网络多媒体带来了无限乐趣，尤其是在图形界面开发后，视觉上的冲击使得网络更加具有吸引力。其中，在网页中不可避免地会包含着一定数量的图片，大量的图片在增加吸引力的同时，也能够给访问者提供更多更直接的信息，图片较少受到计算机平台、地域和语种的限制，从而能够使得网页更多地显示出制作者的创造力。

具体的，网页的页面中有适当的图片，不但可以使页面生动活泼，而且图形和动画在网页的设计当中具有鲜明的指向性。在网络传播中，新闻，广告、旅游、生活等各个领域都能利用图片给网络的使用者以鲜活、生动的感观。

目前几乎任何一个网站，都不可避免的大量使用各种图片，新闻图片、广告图片、明星图片以及图表、漫画等，图片的应用使得网络更加丰富多彩，平面媒体已经进入“读图时代”，图片的应用已经极为广泛，例如：在网络相册应用中用户查看图片已是最普遍的需求。

虽然图片具有上述优势，但是由于图片是在Internet网络上进行传送，而Internet网络的传输速率并不理想，特别是当查看图片等待的时间比较长时，用户的体验会很差，因此，图片的显示方式就显得尤为重要。

现有技术中，图片的显示方法包括：在HTML(HyperText Mark-upLanguage，超文本链接标示语言)页面中直接使用IMG(image的缩写，图片的意思)标签加载图片，并在图片完全加载完成后，显示该图片。

但是，在实现本发明的过程中，发明人发现现有技术中至少存在以下问题：

在网络速度比较慢或者要显示的图片比较大时，需要将图片完全加载完成后才会显示该图片，页面会出现空白的等待过程，并且不能开始给用户看到图片的大概情况，用户体验不好。

发明内容

本发明提供一种图片的显示方法和设备，以尽快看到图片的大概情况，并尽快看到清晰的原图，提高了用户的使用体验。

为了达到上述目的，本发明提出了一种图片的显示方法，所述方法包括以下步骤：

获取待显示图片对应的缩略图信息和原图信息；

根据所述原图信息显示所述缩略图，并在所述缩略图上逐步显示所述原图。

其中，所述原图信息包括所述原图的高度、宽度，以及所述原图的统一资源定位符URL，所述缩略图信息包括所述缩略图的URL，所述获取待显示图片对应的缩略图信息和原图信息，包括：

根据所述待显示图片的信息获取所述缩略图的URL，并获取所述原图的高度、宽度，以及所述原图的URL。

其中，根据所述原图信息显示所述缩略图，包括：

根据所述原图的高度和宽度调整所述缩略图的高度和宽度，并根据调整后的所述缩略图的高度和宽度显示所述缩略图。

其中，所述根据调整后的所述缩略图的高度和宽度显示所述缩略图，包括：

根据所述缩略图的URL加载所述缩略图，并按照调整后的所述缩略图的高度和宽度显示加载的所述缩略图。

其中，在所述缩略图上逐步显示所述原图，包括：

根据所述原图的URL加载所述原图，并将所述原图的已加载部分叠加在所述缩略图上与所述缩略图同步显示。

其中，在所述缩略图上逐步显示所述原图，之后还包括：

在所述缩略图上显示所述原图时，隐藏显示了所述原图已加载部分的缩略图。

一种图片的显示设备，其特征在于，包括：

获取模块，用于获取待显示图片对应的缩略图信息和原图信息；

显示模块，用于根据所述原图信息显示所述缩略图，并在所述缩略图上逐步显示所述原图。

其中，所述原图信息包括所述原图的高度、宽度，以及所述原图的统一资源定位符URL，所述缩略图信息包括所述缩略图的URL，

所述获取模块具体用于，根据所述待显示图片的信息获取所述缩略图的URL，并获取所述原图的高度、宽度，以及所述原图的URL。

其中，所述显示模块具体用于，根据所述原图的高度和宽度调整所述缩略图的高度和宽度，并根据调整后的所述缩略图的高度和宽度显示所述缩略图。

其中，所述显示模块进一步用于，根据所述缩略图的URL加载所述缩略图，并按照调整后的所述缩略图的高度和宽度显示加载的所述缩略图。

其中，所述显示模块还用于，根据所述原图的URL加载所述原图，并将所述原图的已加载部分叠加在所述缩略图上与所述缩略图同步显示。

其中，该设备还包括：

隐藏模块，用于在所述缩略图上显示所述原图时，隐藏显示了所述原图已加载部分的缩略图。

与现有技术相比，本发明具有以下优点：

通过将缩略图和原图片同时加载并叠加显示的方法，使得用户能够第一时间看到图片的大概情况，并尽可能快的看到清晰的原图。从而实现了用户看到的照片是一个从模糊到清晰的动态过程，满足了用户查看图片的需求，提高了用户的体验。

附图说明

为了更清楚地说明本发明的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明所提出的一种图片的显示方法的流程示意图；

图2为本发明所提出的另一种图片的显示方法的流程示意图；

图3a为本发明所提出的一种图片的显示方法在具体应用场景中的流程示意图；

图3b为本发明所提出的一种图片的显示方法在具体应用场景中显示效果流程示意图；

图4a为本发明一种应用场景中调整后缩略图的示意图；

图4b为本发明一种应用场景中完成部分原图片加载的示意图；

图4c为本发明一种应用场景中完成部分原图片加载的示意图；

图4d为本发明一种应用场景中完成部分原图片加载的示意图；

图4e为本发明一种应用场景中完成全部原图片加载的示意图；

图5为本发明提出的一种图片的显示设备的结构示意图；

图6为本发明提出的另一种图片的显示设备的结构示意图。

具体实施方式

下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明中，通过获取待显示图片对应的缩略图信息(缩略图的URL)和原图信息(原图的高度、宽度，以及URL)，在根据缩略图的URL对缩略图进行加载时，根据原图的高度和宽度对缩略图的高度和宽度进行调整，并将调整后的缩略图进行显示；然后根据原图的URL加载并显示原图，将原图叠加在缩略图上对应的位置进行显示，逐步将缩略图覆盖。从而实现了用户看到的图片是一个从模糊到清晰的动态过程，满足了用户查看照片的需求，提高了用户体验。

基于上述思想，本发明所提出的一种图片的显示方法，如图1所示，该方法包括以下步骤：

步骤101，获取待显示图片对应的缩略图信息和原图信息。

具体的，所述原图信息包括所述原图的高度、宽度，以及所述原图的统一资源定位符URL，所述缩略图信息包括所述缩略图的URL，所述获取待显示图片对应的缩略图信息和原图信息，包括：根据所述待显示图片的信息获取所述缩略图的URL，并获取所述原图的高度、宽度，以及所述原图的URL。

步骤102，根据所述原图的信息显示所述缩略图，并在所述缩略图上逐步显示所述原图。

具体的，根据所述原图信息显示所述缩略图，包括：根据所述原图的高度和宽度调整所述缩略图的高度和宽度，并根据调整后的所述缩略图的高度和宽度显示所述缩略图。

进一步的，所述根据调整后的所述缩略图的高度和宽度显示所述缩略图，包括：根据所述缩略图的URL加载所述缩略图，并按照调整后的所述缩略图的高度和宽度显示加载的所述缩略图。

本发明中，在所述缩略图上逐步显示所述原图，包括：根据所述原图的URL加载所述原图，并将所述原图的已加载部分叠加在所述缩略图上与所述缩略图同步显示。

另外，在所述缩略图上逐步显示所述原图，之后还包括：在所述缩略图上显示所述原图时，隐藏显示了所述原图已加载部分的缩略图。

可见，通过使用本发明提供的技术方案，通过将缩略图和原图片同时加载并叠加显示的方法，使得用户能够第一时间看到图片的大概情况，并尽可能快的看到清晰的原图。从而实现了用户看到的照片是一个从模糊到清晰的动态过程，满足了用户查看图片的需求，提高了用户的体验。

为了更加清楚的阐述本发明提供的技术方案，以下对本发明进行具体详细的说明。如图2所示，本发明提出了一种图片的显示方法，该方法包括以下步骤：

步骤201，获取待显示图片的信息。

具体的，当需要显示某个图片(例如，图片A)时，需要先获取该待显示图片(即图片A)的信息。其中，该图片A的信息包括但不限于该图片A的属性信息、名称信息、简要介绍信息、原图的URL(Uniform/UniversalResource Locator，统一资源定位符)信息、原图的高度信息、原图的宽度信息、缩略图的URL信息等。

步骤202，根据待显示图片的信息获取待显示图片对应的缩略图信息和原图信息。

具体的，当获取到待显示图片的信息后，即可以根据该待显示图片的信息获取该待显示图片对应的缩略图信息和原图信息。其中，该缩略图信息包括但不限于该缩略图的URL；该原图信息包括但不限于该原图的高度、宽度，以及所述原图的统一资源定位符URL。

步骤203，根据该原图信息显示该缩略图。

具体的，当获取到原图信息后，需要根据该原图信息调整该缩略图，即根据该原图的高度和宽度调整该缩略图的高度和宽度，并根据该调整后的缩略图的高度和宽度显示该缩略图。

进一步的，在显示该缩略图的过程中，需要首先根据缩略图的URL加载该缩略图，并按照调整后的该缩略图的高度和宽度显示加载的缩略图。

例如，原图的高度和宽度分别为100cm和80cm，则在根据缩略图的URL加载缩略图的过程中，需要将缩略图的高度设置为100cm，将缩略图的宽度设置为80cm，即显示高度为100cm、宽度为80cm的缩略图。

当然，在实际应用中，该显示过程还可以选择其他方式，例如，按照原图的高度和宽度的比例显示该缩略图，例如，原图的高度和宽度分别为100cm和80cm，则在根据缩略图的URL加载缩略图的过程中，需要将缩略图的高度设置为50cm，将缩略图的宽度设置为40cm，即显示高度为50cm、宽度为40cm的缩略图，这种方式不再详加说明，以按照原图的高度和宽度显示缩略图的宽度和高度为例进行说明。

需要说明的是，在实际应用中，该缩略图可以加载完成后显示，也可以边加载边显示，在某些应用场景下该缩略图还可以是已经加载完成的，本发明实施例中不再详加赘述。

步骤204，在缩略图上逐步显示该原图。需要注意的是，本步骤中在缩略图上逐步显示该原图的过程和步骤203中根据该原图信息显示该缩略图的过程是同步进行的。

具体的，在缩略图上逐步显示原图的过程中，需要首先根据原图的URL加载该原图，并将原图的已加载部分叠加在缩略图上与该缩略图进行同步显示。

综上可以看出，本发明中，根据原图的高度和宽度相应调整缩略图的高度和宽度，并显示调整后的缩略图，然后将原图已加载部分覆盖在缩略图上进行显示，直至原图将缩略图全部覆盖。其中，原图加载多少就需要显示多少，没有加载的部分则仍然显示缩略图，从而逐步将缩略图覆盖，原图在加载的过程中用户看到的是照片从模糊到清晰的渐变效果。而由于待显示图片的缩略图和原图是同步显示的，待显示图片的缩略图很小，通常很快就能给用户看到待显示图片模糊的效果，而原图的加载过程中从上往下逐步覆盖缩略图，这样用户就可以看到加载过程中的原图。

可见，通过使用本发明提供的技术方案，通过将缩略图和原图片同时加载并叠加显示的方法，使得用户能够第一时间看到图片的大概情况，并尽可能快的看到清晰的原图。从而实现了用户看到的照片是一个从模糊到清晰的动态过程，满足了用户查看图片的需求，提高了用户的体验。

为了进一步阐述本发明提供技术方案，以下结合一种具体的应用场景进行详细说明。本应用场景下，以在网络相册应用中用户查看照片为例进行说明。其中，在网络相册应用中用户查看照片是一种常见的图片操作方式，针对该操作，如图3a所示，为本发明所提出的一种图片的显示方法在具体应用场景中的流程示意图，该方法包括以下步骤：

步骤301，在网络相册中点击要查看照片的标识。

需要说明的是，该标识可以是直接链接要查看的照片，也可以是文字、缩略图，还可以是一个与要查看照片不同的图片，在此不再详加赘述。

步骤302，获取该照片的缩略图信息和照片原图信息。其中，该缩略图信息包括但不限于该缩略图的URL；该原图信息包括但不限于该原图的高度、宽度，以及所述原图的统一资源定位符URL。

步骤303，加载照片的缩略图和照片原图，将缩略图按照原图的长和宽调整后进行显示。

具体的，根据获取的照片的高度和宽度调整该照片的缩略图高度和宽度，并根据缩略图的URL加载缩略图，同时根据原图的URL加载原图，并显示调整后的缩略图。

可以看出，由于照片的缩略图是按照片原图大小来进行显示的，因此，照片是模糊的，用户可以根据看到照片的大概轮廓来决定是否等待图片全部打开。例如，用户打开一个词链接的图片，若这个词是“老虎”，并且用户想查看老虎的照片，当用户点击打开后，根据显示的模糊的图片轮廓，得知该图片为卡通图片时，用户可以直接关闭该图片，不必等待图片完全打开。

需要说明的是，加载就是将缩略图从网络服务器下载到用户终端内存中的整个过程，缩略图可以先加载完成后显示，由于缩略图比照片原图小，所以缩略图会比照片原图先完成加载。另外，在实际应用中，该缩略图还可以边加载边显示，由于缩略图比照片原图小，则缩略图会比照片原图先完成加载。而在某些应用场景下该缩略图还可以是已经加载完成的，此时不需要再对该缩略图进行加载。

步骤304，将原图已加载部分叠加在缩略图上进行显示。

具体的，在显示调整后的缩略图的同时，通过叠加技术将原图已加载部分叠加在该缩略图上进行显示，照片原图加载了多少就显示多少，加载过程中由上向下逐步覆盖缩略图，没有加载的部分则仍然显示缩略图，逐步将缩略图覆盖掉，在加载的过程中用户看到的是照片从模糊到清晰的渐变效果。

需要说明的是，通过叠加技术让用户看到照片从模糊到清晰的动态过程，可以是由下向上和\或由左向右，也可有用户设定照片的渐变方向，本发明中不再详加赘述。

步骤305，在缩略图上显示原图时，隐藏缩略图被叠加部分。其中，照片原图已经全部将缩略图覆盖，这时用户看到的是真实的原图，此时可以隐藏缩略图，以防止缩略图干扰PNG或GIF等有透明效果的图片显示。

可以看出，上述方法可用于每次打开一个照片，也可以用于同时打开多个照片。

基于图3a所示流程图的思想，如图3b所示，为本发明所提出的一种图片的显示方法在具体应用场景中显示效果的流程示意图。

基于上述思想，接收到用户终端打开图片的指令后，如图4a所示，通过获取图片的缩略图和地址，以及图片的高度和宽度，对缩略图进行加载，并将缩略图按照原图片的长和宽进行调整后显示，如图4a所示。加载并显示原图片，将原图片叠加在缩略图上对应位置进行显示，逐步将缩略图覆盖，如图4b-图4d所示，原图逐步将缩略图覆盖。如图4e所示，为全部原图加载完成后，隐藏缩略图。

可见，通过使用本发明提供的技术方案，通过将缩略图和原图片同时加载并叠加显示的方法，使得用户能够第一时间看到图片的大概情况，并尽可能快的看到清晰的原图。从而实现了用户看到的照片是一个从模糊到清晰的动态过程，满足了用户查看图片的需求，提高了用户的体验。

基于同样的发明构思，如图5所示，本发明还提出了一种图片的显示设备结构示意图，具体包括：

获取模块11，用于获取待显示图片对应的缩略图信息和原图信息；

显示模块12，用于根据所述原图信息显示所述缩略图，并在所述缩略图上逐步显示所述原图。

可见，通过使用本发明提供的技术方案，通过将缩略图和原图片同时加载并叠加显示的方法，使得用户能够第一时间看到图片的大概情况，并尽可能快的看到清晰的原图。从而实现了用户看到的照片是一个从模糊到清晰的动态过程，满足了用户查看图片的需求，提高了用户的体验。

基于同样的发明构思，如图6所示，本发明还提出了一种图片的显示设备结构示意图，具体包括：

获取模块21，用于获取待显示图片对应的缩略图信息和原图信息。

所述原图信息包括所述原图的高度、宽度，以及所述原图的统一资源定位符URL，所述缩略图信息包括所述缩略图的URL，

所述获取模块21具体用于，根据所述待显示图片的信息获取所述缩略图的URL，并获取所述原图的高度、宽度，以及所述原图的URL。

显示模块22，用于根据所述原图信息显示所述缩略图，并在所述缩略图上逐步显示所述原图。

所述显示模块22具体用于，根据所述原图的高度和宽度调整所述缩略图的高度和宽度，并根据调整后的所述缩略图的高度和宽度显示所述缩略图。

所述显示模块22进一步用于，根据所述缩略图的URL加载所述缩略图，并按照调整后的所述缩略图的高度和宽度显示加载的所述缩略图。

所述显示模块22还用于，根据所述原图的URL加载所述原图，并将所述原图的已加载部分叠加在所述缩略图上与所述缩略图同步显示。

隐藏模块23，用于在所述缩略图上显示所述原图时，隐藏显示了所述原图已加载部分的缩略图。

可见，通过使用本发明提供的技术方案，通过将缩略图和原图片同时加载并叠加显示的方法，使得用户能够第一时间看到图片的大概情况，并尽可能快的看到清晰的原图。从而实现了用户看到的照片是一个从模糊到清晰的动态过程，满足了用户查看图片的需求，提高了用户的体验。

本发明装置的各个模块可以集成于一体，也可以分离部署。上述模块可以合并为一个模块，也可以进一步拆分成多个子模块。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本发明可以通过硬件实现，也可以借助软件加必要的通用硬件平台的方式来实现。基于这样的理解，本发明的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

本领域技术人员可以理解附图只是一个优选实施例的示意图，附图中的模块或流程并不一定是实施本发明所必须的。

本领域技术人员可以理解实施例中的装置中的模块可以按照实施例描述进行分布于实施例的装置中，也可以进行相应变化位于不同于本实施例的一个或多个装置中。上述实施例的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本发明序号仅仅为了描述，不代表实施例的优劣。

以上公开的仅为本发明的几个具体实施例，但是，本发明并非局限于此，任何本领域的技术人员能思之的变化都应落入本发明的保护范围。

Claims (2)

1.一种图片的显示方法，其特征在于，所述方法包括以下步骤：

获取待显示图片对应的缩略图信息和原图信息，所述原图信息包括所述原图的高度、宽度，以及所述原图的统一资源定位符URL，所述缩略图信息包括所述缩略图的URL；

根据所述缩略图的URL加载所述缩略图，根据所述原图的高度和宽度调整所述缩略图的高度和宽度，并显示调整后缩略图；

根据所述原图的URL加载所述原图，并将所述原图叠加在所述缩略图上逐步进行显示，其中，将所述原图的已加载部分覆盖在所述缩略图上与所述缩略图同步显示，在显示过程中，所述原图加载多少就显示多少，没有加载的部分则仍然显示所述缩略图，而隐藏所述缩略图被所述原图已加载和显示的部分所覆盖之处。

2.一种图片的显示设备，其特征在于，包括：

获取模块，用于获取待显示图片对应的缩略图信息和原图信息，所述原图信息包括所述原图的高度、宽度，以及所述原图的统一资源定位符URL，所述缩略图信息包括所述缩略图的URL；

显示模块，用于根据所述缩略图的URL加载所述缩略图，根据所述原图的高度和宽度调整所述缩略图的高度和宽度，并显示调整后缩略图；以及根据所述原图的URL加载所述原图，并将所述原图叠加在所述缩略图上逐步进行显示，其中，将所述原图的已加载部分覆盖在所述缩略图上与所述缩略图同步显示，在显示过程中，所述原图加载多少就显示多少，没有加载的部分则仍然显示所述缩略图；

隐藏模块，用于在所述缩略图上逐步显示所述原图时，隐藏所述缩略图被所述原图已加载和显示的部分所覆盖之处。