一种图片加载的方法及装置制造方法及图纸

技术编号:14113670 阅读:106 留言:0更新日期:2016-12-07 11:03
本发明专利技术涉及一种图片加载的方法及装置。该图片加载的方法包括:客户端向服务器发送获取图片的请求;服务器根据请求生成图片的主色调值,其中,服务器从请求对应的统一资源定位符中获取图片的主色调值、或根据请求从数据库中调取图片对应的主色调值;将主色调值返回给客户端;客户端加载图片,且在客户端加载完图片前将图片的显示区域显示为主色调值对应的颜色。通过实施本技术方案,能预先在图片显示区域显示图片的主色调,避免了图片加载完成前图片的显示区域出现一片空白,加载后颜色反差较大的问题,提高用户的视觉体验。

【技术实现步骤摘要】

本专利技术涉及互联网领域,更具体地说,涉及一种图片加载的方法及装置
技术介绍
统一资源定位符(URL)是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。统一资源定位符是统一资源标志符的一个下种,统一资源标志符确定一个资源,而统一资源定位符不但确定一个资源,而且还表示出它在哪里。在图片加载过程中,每个待加载图片都有一个相应的URL,服务器可根据图片的URL在数据库中定位到该图片,数据库还保存有图片的属性信息。随着移动互联网的发展,用户利用手机进行越来越多的活动,若浏览网页、听歌、购物、聊天等等,用户在打开浏览器或打开APP时,浏览器或APP一般会加载一些图片,由于图片相较于文字一般较大,所以当加载图片时,若网络不稳定或网速不快的话,往往在文字显示完成后,图片显示之前会长时间处于空白状态,在图片从服务器下载完成后又突然加载,造成画面的跳跃感,降低用户视觉体验。或者,在网络较差时,也只能显示图片的顶端或者低端等次要部分,其余部分还是会呈现空白色,明显不能满足用户需求。
技术实现思路
本专利技术要解决的技术问题在于,针对现有技术的图片成功加载前图片显示区域出现空白的缺陷,提供一种图片加载的方法及装置。本专利技术解决其技术问题所采用的技术方案是:构造一种图片加载的方法,包括:向服务器发送获取图片的请求;接收所述服务器根据所述请求返回的所述图片的主色调值;加载所述图片,且在所述图片加载完成前将所述图片的显示区域显示为所述主色调值对应的颜色。进一步,本专利技术所述的方法还包括:在所述图片加载完成后,在所述图片的显示区域显示所述图片。另一方面,本专利技术还公开一种图片加载的方法,包括:接收客户端发送的获取图片的请求;根据所述请求生成所述图片的主色调值;将生成的所述主色调值返回给所述客户端。优选地,在本专利技术所述的方法中,所述根据所述请求生成所述图片的主色调值,包括:从所述请求对应的统一资源定位符中获取所述图片的主色调值。优选地,在本专利技术所述的方法中,还包括:根据数据库中存储的所述图片的颜色生成所述图片的主色调值;根据所述主色调值生成所述图片对应的统一资源定位符。优选地,在本专利技术所述的方法中,所述根据所述请求生成所述图片的主色调值,包括:根据所述请求从数据库中调取所述图片对应的主色调值,其中,所述主色调值为根据所述图片的颜色预先生成并保存在所述数据库中。另一方面,本专利技术还公开一种图片加载的方法,包括:客户端向服务器发送获取图片的请求;所述服务器根据所述请求生成所述图片的主色调值,并将所述主色调值返回给所述客户端;所述客户端加载所述图片,且在所述客户端加载完所述图片前将所述图片的显示区域显示为所述主色调值对应的颜色。优选地,在本专利技术所述的方法中,所述服务器根据所述请求生成所述图片的主色调值,包括:所述服务器从所述请求对应的统一资源定位符中获取所述图片的主色调值。另一方面,本专利技术还公开一种图片加载的装置,包括:请求发送单元,用于向服务器发送获取图片的请求;主色调值接收单元,用于接收所述服务器根据所述请求返回的所述图片的主色调值;第一加载单元,用于加载所述图片;第二加载单元,用于在所述图片加载完成前将所述图片的显示区域显示为所述主色调值对应的颜色。另一方面,本专利技术还公开一种图片加载的装置,包括:请求接收单元,用于接收客户端发送的获取图片的请求;主色调值生成单元,用于根据所述请求生成所述图片的主色调值;主色调值发送单元,用于将生成的所述主色调值返回给所述客户端。实施本专利技术的一种图片加载的方法及装置,具有以下有益效果:图片加载的方法包括:客户端向服务器发送获取图片的请求;所述服务器根据所述请求生成所述图片的主色调值,其中,从所述请求对应的统一资源定位符中获取所述图片的主色调值、或根据所述请求从数据库中调取所述图片对应的主色调值;将所述主色调值返回给所述客户端;所述客户端加载所述图片;在所述客户端加载完所述图片前将所述图片的显示区域显示为所述主色调值对应的颜色。通过实施本技术方案,能预先在图片显示区域显示图片的主色调,避免了图片加载完成前出现一片空白,加载后反差较大的问题,提高用户的使用体验。附图说明下面将结合附图及实施例对本专利技术作进一步说明,附图中:图1是本专利技术实施例提供的一种图片加载的方法的流程示意图;图2是本专利技术实施例提供的另一种图片加载的方法的流程示意图;图3是本专利技术实施例提供的一种图片加载的方法的流程示意图;图4是本专利技术实施例提供的一种图片加载的装置的结构示意图;图5是本专利技术实施例提供的另一种图片加载的装置的结构示意图。具体实施方式为了对本专利技术的技术特征、目的和效果有更加清楚的理解,现对照附图详细说明本专利技术的具体实施方式。本专利技术针对现有技术的上述图片成功加载前图片显示区域出现空白的缺陷,提供一种图片加载的方法及装置。该图片加载的方法包括:客户端向服务器发送获取图片的请求;服务器根据请求生成图片的主色调值,其中,从请求对应的统一资源定位符中获取图片的主色调值、或根据请求从数据库中调取图片对应的主色调值;将主色调值返回给客户端;客户端加载图片,且在客户端加载完图片前将图片的显示区域显示为主色调值对应的颜色。通过实施本技术方案,能预先在图片显示区域显示图片的主色调,避免了图片加载完成前出现一片空白,加载后图片颜色反差较大的问题,提高用户的使用体验。具体通过以下几个实施例进行说明。如图1,是本专利技术的第一实施例。如图1所示,是本实施例的一种图片加载的方法的流程示意图。该图片加载的方法应用于接入互联网的客户端,客户端包括但不限于:访问万维网的网页浏览器、收寄电子邮件时的电子邮件客户端、以及即时通讯的客户端软件等,也包括智能手机终端中的应用程序。例如,用户在智能手机终端上打开浏览器或打开APP进行浏览网页、听歌、购物、聊天等等。具体的,在客户端侧,该图片加载的方法包括:步骤101:向服务器发送获取图片的请求。具体的,用户在使用客户端进行浏览网页、听歌、购物、聊天的过程中,客户端需要显示一些图片,客户端根据需求向服务器发送获取图片的请求。例如,用户在浏览网页过程中,当点击进入一个网页后,网页中有需要加载的图片,服务器首先将该图片的URL发送到浏览器的缓存中,此时,如果是用户首次打开该网页,则本地没有存储该图片,浏览器需要向服务器发送获取图片的请求。步骤102:接收服务器根据请求返回的图片的主色调值。具体的,在客户端向服务器发送获取图片的请求后,服务器会根据该图片的URL在数据库中查找并定位到该图片。数据库中不仅存储该图片,还存储了图片的多种属性信息,例如图片的尺寸、大小、清晰度、色彩、主色调、背景色等,其中,图片的主色调值根据图片的颜色生成。色调是指物体反射的光线中以哪种波长占优势来决定的,不同波长产生不同颜色的感觉,色调是颜色的重要的特征,它决定了颜色本质的根本特征,主色调是对一幅图片的整体颜色的概括评价,是指图片色彩外观的基本倾向。服务器根据客户端的获取图片请求,将定位到的图片以及图片的属性信息下载到服务器上,例如将图片的主色调值下载到服务器上,服务器再将该图片以及图片的主色调值发送到客户端,客户端接收服务器根据本文档来自技高网...
一种图片加载的方法及装置

【技术保护点】
一种图片加载的方法,其特征在于,包括:向服务器发送获取图片的请求;接收所述服务器根据所述请求返回的所述图片的主色调值;加载所述图片,且在所述图片加载完成前将所述图片的显示区域显示为所述主色调值对应的颜色。

【技术特征摘要】
1.一种图片加载的方法,其特征在于,包括:向服务器发送获取图片的请求;接收所述服务器根据所述请求返回的所述图片的主色调值;加载所述图片,且在所述图片加载完成前将所述图片的显示区域显示为所述主色调值对应的颜色。2.根据权利要求1所述的方法,其特征在于,所述方法还包括:在所述图片加载完成后,在所述图片的显示区域显示所述图片。3.一种图片加载的方法,其特征在于,包括:接收客户端发送的获取图片的请求;根据所述请求生成所述图片的主色调值;将生成的所述主色调值返回给所述客户端。4.根据权利要求3所述的方法,其特征在于,所述根据所述请求生成所述图片的主色调值,包括:从所述请求对应的统一资源定位符中获取所述图片的主色调值。5.根据权利要求4所述的方法,其特征在于,所述方法还包括:根据数据库中存储的所述图片的颜色生成所述图片的主色调值;根据所述主色调值生成所述图片对应的统一资源定位符。6.根据权利要求3所述的方法,其特征在于,所述根据所述请求生成所述图片的主色调值,包括:根据所述请求从数据库中调取所述图片对应的主色调值,其中,所述主色调值为根据所述图片...

【专利技术属性】
技术研发人员:罗小平
申请(专利权)人:珠海市魅族科技有限公司
类型:发明
国别省市:广东;44

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

1