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

技术编号:6956305 阅读:167 留言:0更新日期:2012-04-11 18:40
本发明专利技术提供一种图片的显示方法和设备,包括以下步骤:获取待显示图片对应的缩略图信息和原图信息;根据所述原图信息显示所述缩略图,并在所述缩略图上逐步显示所述原图。本发明专利技术中,通过将缩略图和原图同时加载并叠加显示的方法,使得用户能够第一时间看到图片的大概情况,并尽可能快的看到清晰的原图。从而实现了用户看到的照片是一个从模糊到清晰的动态过程,满足了用户查看图片的需求,提高了用户的体验。

【技术实现步骤摘要】

本专利技术涉及网络
,特别是涉及一种图片的显示方法和设备
技术介绍
随着hternet的迅速发展,网络多媒体带来了无限乐趣,尤其是在图形界面开发后,视觉上的冲击使得网络更加具有吸引力。其中,在网页中不可避免地会包含着一定数量的图片,大量的图片在增加吸引力的同时,也能够给访问者提供更多更直接的信息,图片较少受到计算机平台、地域和语种的限制,从而能够使得网页更多地显示出制作者的创造力。具体的,网页的页面中有适当的图片,不但可以使页面生动活泼,而且图形和动画在网页的设计当中具有鲜明的指向性。在网络传播中,新闻,广告、旅游、生活等各个领域都能利用图片给网络的使用者以鲜活、生动的感观。目前几乎任何一个网站,都不可避免的大量使用各种图片,新闻图片、广告图片、 明星图片以及图表、漫画等,图片的应用使得网络更加丰富多彩,平面媒体已经进入“读图时代”,图片的应用已经极为广泛,例如在网络相册应用中用户查看图片已是最普遍的需求。虽然图片具有上述优势,但是由于图片是在hternet网络上进行传送,而 Internet网络的传输速率并不理想,特别是当查看图片等待的时间比较长时,用户的体验会很差,因此,图片的显示方式就显得尤为重要。现有技术中,图片的显示方法包括在HTML(HyperText Mark-upLanguage,超文本链接标示语言)页面中直接使用IMG(image的缩写,图片的意思)标签加载图片,并在图片完全加载完成后,显示该图片。但是,在实现本专利技术的过程中,专利技术人发现现有技术中至少存在以下问题在网络速度比较慢或者要显示的图片比较大时,需要将图片完全加载完成后才会显示该图片,页面会出现空白的等待过程,并且不能开始给用户看到图片的大概情况,用户体验不好。
技术实现思路
本专利技术提供一种图片的显示方法和设备,以尽快看到图片的大概情况,并尽快看到清晰的原图,提高了用户的使用体验。为了达到上述目的,本专利技术提出了一种图片的显示方法,所述方法包括以下步骤获取待显示图片对应的缩略图信息和原图信息;根据所述原图信息显示所述缩略图,并在所述缩略图上逐步显示所述原图。其中,所述原图信息包括所述原图的高度、宽度,以及所述原图的统一资源定位符 URL,所述缩略图信息包括所述缩略图的URL,所述获取待显示图片对应的缩略图信息和原图信息,包括根据所述待显示图片的信息获取所述缩略图的URL,并获取所述原图的高度、宽度,以及所述原图的URL。其中,根据所述原图信息显示所述缩略图,包括根据所述原图的高度和宽度调整所述缩略图的高度和宽度,并根据调整后的所述缩略图的高度和宽度显示所述缩略图。其中,所述根据调整后的所述缩略图的高度和宽度显示所述缩略图,包括根据所述缩略图的URL加载所述缩略图,并按照调整后的所述缩略图的高度和宽度显示加载的所述缩略图。其中,在所述缩略图上逐步显示所述原图,包括根据所述原图的URL加载所述原图,并将所述原图的已加载部分叠加在所述缩略图上与所述缩略图同步显示。其中,在所述缩略图上逐步显示所述原图,之后还包括在所述缩略图上显示所述原图时,隐藏显示了所述原图已加载部分的缩略图。一种图片的显示设备,其特征在于,包括获取模块,用于获取待显示图片对应的缩略图信息和原图信息;显示模块,用于根据所述原图信息显示所述缩略图,并在所述缩略图上逐步显示所述原图。其中,所述原图信息包括所述原图的高度、宽度,以及所述原图的统一资源定位符 URL,所述缩略图信息包括所述缩略图的URL,所述获取模块具体用于,根据所述待显示图片的信息获取所述缩略图的URL,并获取所述原图的高度、宽度,以及所述原图的URL。其中,所述显示模块具体用于,根据所述原图的高度和宽度调整所述缩略图的高度和宽度,并根据调整后的所述缩略图的高度和宽度显示所述缩略图。其中,所述显示模块进一步用于,根据所述缩略图的URL加载所述缩略图,并按照调整后的所述缩略图的高度和宽度显示加载的所述缩略图。其中,所述显示模块还用于,根据所述原图的URL加载所述原图,并将所述原图的已加载部分叠加在所述缩略图上与所述缩略图同步显示。其中,该设备还包括隐藏模块,用于在所述缩略图上显示所述原图时,隐藏显示了所述原图已加载部分的缩略图。与现有技术相比,本专利技术具有以下优点通过将缩略图和原图片同时加载并叠加显示的方法,使得用户能够第一时间看到图片的大概情况,并尽可能快的看到清晰的原图。从而实现了用户看到的照片是一个从模糊到清晰的动态过程,满足了用户查看图片的需求,提高了用户的体验。附图说明为了更清楚地说明本专利技术的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本专利技术的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。图1为本专利技术所提出的一种图片的显示方法的流程示意图;图2为本专利技术所提出的另一种图片的显示方法的流程示意图;图3a为本专利技术所提出的一种图片的显示方法在具体应用场景中的流程示意图;图北为本专利技术所提出的一种图片的显示方法在具体应用场景中显示效果流程示意图;图如为本专利技术一种应用场景中调整后缩略图的示意图;图4b为本专利技术一种应用场景中完成部分原图片加载的示意图;图如为本专利技术一种应用场景中完成部分原图片加载的示意图;图4d为本专利技术一种应用场景中完成部分原图片加载的示意图;图如为本专利技术一种应用场景中完成全部原图片加载的示意图;图5为本专利技术提出的一种图片的显示设备的结构示意图;图6为本专利技术提出的另一种图片的显示设备的结构示意图。具体实施例方式下面将结合本专利技术中的附图,对本专利技术中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本专利技术的一部分实施例,而不是全部的实施例。基于本专利技术中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本专利技术保护的范围。本专利技术中,通过获取待显示图片对应的缩略图信息(缩略图的URL)和原图信息 (原图的高度、宽度,以及URL),在根据缩略图的URL对缩略图进行加载时,根据原图的高度和宽度对缩略图的高度和宽度进行调整,并将调整后的缩略图进行显示;然后根据原图的 URL加载并显示原图,将原图叠加在缩略图上对应的位置进行显示,逐步将缩略图覆盖。从而实现了用户看到的图片是一个从模糊到清晰的动态过程,满足了用户查看照片的需求, 提高了用户体验。基于上述思想,本专利技术所提出的一种图片的显示方法,如图1所示,该方法包括以下步骤步骤101,获取待显示图片对应的缩略图信息和原图信息。具体的,所述原图信息包括所述原图的高度、宽度,以及所述原图的统一资源定位符URL,所述缩略图信息包括所述缩略图的URL,所述获取待显示图片对应的缩略图信息和原图信息,包括根据所述待显示图片的信息获取所述缩略图的URL,并获取所述原图的高度、宽度,以及所述原图的URL。步骤102,根据所述原图的信息显示所述缩略图,并在所述缩略图上逐步显示所述原图。具体的,根据所述原图信息显示所述缩略图,包括根据所述原图的高度和宽度调整所述缩略图的高度和宽度,并根据调整后的所述缩略图的高度和宽度显示所述缩略图。进一步的,所述根据调整后的所述缩略图的高度和宽度显示所述缩略图,包括根据所述缩略图的URL加载所述本文档来自技高网
...

【技术保护点】
1.一种图片的显示方法,其特征在于,所述方法包括以下步骤:获取待显示图片对应的缩略图信息和原图信息;根据所述原图信息显示所述缩略图,并在所述缩略图上逐步显示所述原图。

【技术特征摘要】
1.一种图片的显示方法,其特征在于,所述方法包括以下步骤 获取待显示图片对应的缩略图信息和原图信息;根据所述原图信息显示所述缩略图,并在所述缩略图上逐步显示所述原图。2.如权利要求1所述的方法,其特征在于,所述原图信息包括所述原图的高度、宽度, 以及所述原图的统一资源定位符URL,所述缩略图信息包括所述缩略图的URL,所述获取待显示图片对应的缩略图信息和原图信息,包括根据所述待显示图片的信息获取所述缩略图的URL,并获取所述原图的高度、宽度,以及所述原图的URL。3.如权利要求2所述的方法,其特征在于,根据所述原图信息显示所述缩略图,包括 根据所述原图的高度和宽度调整所述缩略图的高度和宽度,并根据调整后的所述缩略图的高度和宽度显示所述缩略图。4.如权利要求3所述的方法,其特征在于,所述根据调整后的所述缩略图的高度和宽度显示所述缩略图,包括根据所述缩略图的URL加载所述缩略图,并按照调整后的所述缩略图的高度和宽度显示加载的所述缩略图。5.如权利要求2所述的方法,其特征在于,在所述缩略图上逐步显示所述原图,包括 根据所述原图的URL加载所述原图,并将所述原图的已加载部分叠加在所述缩略图上与所述缩略图同步显示。6.如权利要求1-5任一项所述的方法,其特征在于,在所述缩略图上逐步显示所述原图,之后还包括在所述缩略图上显示所...

【专利技术属性】
技术研发人员:曾健
申请(专利权)人:腾讯数码天津有限公司
类型:发明
国别省市:12

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1