CN106202549A - 一种图片加载的方法及装置 - Google Patents

Abstract

本发明涉及一种图片加载的方法及装置。该图片加载的方法包括：客户端向服务器发送获取图片的请求；服务器根据请求生成图片的主色调值，其中，服务器从请求对应的统一资源定位符中获取图片的主色调值、或根据请求从数据库中调取图片对应的主色调值；将主色调值返回给客户端；客户端加载图片，且在客户端加载完图片前将图片的显示区域显示为主色调值对应的颜色。通过实施本技术方案，能预先在图片显示区域显示图片的主色调，避免了图片加载完成前图片的显示区域出现一片空白，加载后颜色反差较大的问题，提高用户的视觉体验。

Description

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

技术领域

本发明涉及互联网领域，更具体地说，涉及一种图片加载的方法及装置。

背景技术

统一资源定位符(URL)是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。统一资源定位符是统一资源标志符的一个下种，统一资源标志符确定一个资源，而统一资源定位符不但确定一个资源，而且还表示出它在哪里。在图片加载过程中，每个待加载图片都有一个相应的URL，服务器可根据图片的URL在数据库中定位到该图片，数据库还保存有图片的属性信息。

随着移动互联网的发展，用户利用手机进行越来越多的活动，若浏览网页、听歌、购物、聊天等等，用户在打开浏览器或打开APP时，浏览器或APP一般会加载一些图片，由于图片相较于文字一般较大，所以当加载图片时，若网络不稳定或网速不快的话，往往在文字显示完成后，图片显示之前会长时间处于空白状态，在图片从服务器下载完成后又突然加载，造成画面的跳跃感，降低用户视觉体验。或者，在网络较差时，也只能显示图片的顶端或者低端等次要部分，其余部分还是会呈现空白色，明显不能满足用户需求。

发明内容

本发明要解决的技术问题在于，针对现有技术的图片成功加载前图片显示区域出现空白的缺陷，提供一种图片加载的方法及装置。

本发明解决其技术问题所采用的技术方案是：构造一种图片加载的方法，包括：

向服务器发送获取图片的请求；

接收所述服务器根据所述请求返回的所述图片的主色调值；

加载所述图片，且在所述图片加载完成前将所述图片的显示区域显示为所述主色调值对应的颜色。

进一步，本发明所述的方法还包括：

在所述图片加载完成后，在所述图片的显示区域显示所述图片。

另一方面，本发明还公开一种图片加载的方法，包括：

接收客户端发送的获取图片的请求；

根据所述请求生成所述图片的主色调值；

将生成的所述主色调值返回给所述客户端。

优选地，在本发明所述的方法中，所述根据所述请求生成所述图片的主色调值，包括：

从所述请求对应的统一资源定位符中获取所述图片的主色调值。

优选地，在本发明所述的方法中，还包括：

根据数据库中存储的所述图片的颜色生成所述图片的主色调值；

根据所述主色调值生成所述图片对应的统一资源定位符。

优选地，在本发明所述的方法中，所述根据所述请求生成所述图片的主色调值，包括：

根据所述请求从数据库中调取所述图片对应的主色调值，其中，所述主色调值为根据所述图片的颜色预先生成并保存在所述数据库中。

另一方面，本发明还公开一种图片加载的方法，包括：

客户端向服务器发送获取图片的请求；

所述服务器根据所述请求生成所述图片的主色调值，并将所述主色调值返回给所述客户端；

所述客户端加载所述图片，且在所述客户端加载完所述图片前将所述图片的显示区域显示为所述主色调值对应的颜色。

优选地，在本发明所述的方法中，所述服务器根据所述请求生成所述图片的主色调值，包括：

所述服务器从所述请求对应的统一资源定位符中获取所述图片的主色调值。

另一方面，本发明还公开一种图片加载的装置，包括：

请求发送单元，用于向服务器发送获取图片的请求；

主色调值接收单元，用于接收所述服务器根据所述请求返回的所述图片的主色调值；

第一加载单元，用于加载所述图片；

第二加载单元，用于在所述图片加载完成前将所述图片的显示区域显示为所述主色调值对应的颜色。

另一方面，本发明还公开一种图片加载的装置，包括：

请求接收单元，用于接收客户端发送的获取图片的请求；

主色调值生成单元，用于根据所述请求生成所述图片的主色调值；

主色调值发送单元，用于将生成的所述主色调值返回给所述客户端。

实施本发明的一种图片加载的方法及装置，具有以下有益效果：图片加载的方法包括：客户端向服务器发送获取图片的请求；所述服务器根据所述请求生成所述图片的主色调值，其中，从所述请求对应的统一资源定位符中获取所述图片的主色调值、或根据所述请求从数据库中调取所述图片对应的主色调值；将所述主色调值返回给所述客户端；所述客户端加载所述图片；在所述客户端加载完所述图片前将所述图片的显示区域显示为所述主色调值对应的颜色。通过实施本技术方案，能预先在图片显示区域显示图片的主色调，避免了图片加载完成前出现一片空白，加载后反差较大的问题，提高用户的使用体验。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1是本发明实施例提供的一种图片加载的方法的流程示意图；

图2是本发明实施例提供的另一种图片加载的方法的流程示意图；

图3是本发明实施例提供的一种图片加载的方法的流程示意图；

图4是本发明实施例提供的一种图片加载的装置的结构示意图；

图5是本发明实施例提供的另一种图片加载的装置的结构示意图。

具体实施方式

为了对本发明的技术特征、目的和效果有更加清楚的理解，现对照附图详细说明本发明的具体实施方式。

本发明针对现有技术的上述图片成功加载前图片显示区域出现空白的缺陷，提供一种图片加载的方法及装置。该图片加载的方法包括：客户端向服务器发送获取图片的请求；服务器根据请求生成图片的主色调值，其中，从请求对应的统一资源定位符中获取图片的主色调值、或根据请求从数据库中调取图片对应的主色调值；将主色调值返回给客户端；客户端加载图片，且在客户端加载完图片前将图片的显示区域显示为主色调值对应的颜色。通过实施本技术方案，能预先在图片显示区域显示图片的主色调，避免了图片加载完成前出现一片空白，加载后图片颜色反差较大的问题，提高用户的使用体验。具体通过以下几个实施例进行说明。

如图1，是本发明的第一实施例。

如图1所示，是本实施例的一种图片加载的方法的流程示意图。该图片加载的方法应用于接入互联网的客户端，客户端包括但不限于：访问万维网的网页浏览器、收寄电子邮件时的电子邮件客户端、以及即时通讯的客户端软件等，也包括智能手机终端中的应用程序。例如，用户在智能手机终端上打开浏览器或打开APP进行浏览网页、听歌、购物、聊天等等。具体的，在客户端侧，该图片加载的方法包括：

步骤101：向服务器发送获取图片的请求。具体的，用户在使用客户端进行浏览网页、听歌、购物、聊天的过程中，客户端需要显示一些图片，客户端根据需求向服务器发送获取图片的请求。例如，用户在浏览网页过程中，当点击进入一个网页后，网页中有需要加载的图片，服务器首先将该图片的URL发送到浏览器的缓存中，此时，如果是用户首次打开该网页，则本地没有存储该图片，浏览器需要向服务器发送获取图片的请求。

步骤102：接收服务器根据请求返回的图片的主色调值。具体的，在客户端向服务器发送获取图片的请求后，服务器会根据该图片的URL在数据库中查找并定位到该图片。数据库中不仅存储该图片，还存储了图片的多种属性信息，例如图片的尺寸、大小、清晰度、色彩、主色调、背景色等，其中，图片的主色调值根据图片的颜色生成。色调是指物体反射的光线中以哪种波长占优势来决定的，不同波长产生不同颜色的感觉，色调是颜色的重要的特征，它决定了颜色本质的根本特征，主色调是对一幅图片的整体颜色的概括评价，是指图片色彩外观的基本倾向。服务器根据客户端的获取图片请求，将定位到的图片以及图片的属性信息下载到服务器上，例如将图片的主色调值下载到服务器上，服务器再将该图片以及图片的主色调值发送到客户端，客户端接收服务器根据请求返回的图片以及图片的主色调值，当然，客户端优先接收到服务器返回的图片的主色调值。

步骤103：加载图片，且在图片加载完成前将图片的显示区域显示为主色调值对应的颜色。

在客户端接收到图片后，在该图片的显示区域显示图片。显示过程可采用一次性显示、或边下载边显示，即将接收到的图片内容及时显示在图片显示区域。可以理解，加载图片后，会覆盖掉图片的显示区域原有的显示内容，比如图片的主色调值。

具体的，在实际使用客户端加载图片过程中，因为图片较大或网速较慢，客户端从发出获取图片请求到接收到图片需要一定的时间，有时该时间还较长，在这期间，图片的显示区域一直处于空白状态。相比与图片本身，图片的主色调值占用存储空间却很小，瞬间即可完成接收。因此，为避免图片的显示区域长时间处于空白状态，客户端首先调用接收到的图片的主色调值对应的颜色来填充(渲染)图片的显示区域。这样，在客户端接收到图片后，再加载图片的过程过渡比较柔和，保持页面的整体协调，可提高用户的视觉体验。

进一步，在图片加载完成后，客户端调用缓存区内的图片，在图片的显示区域显示图片。因之前在图片显示区域已经渲染了该图片的主色调，且该主色调与该图片整体颜色分布一样，会使图片的加载过程比较柔和，不会引起加载前后的巨大差别，使用户感觉比较舒服，提高了用户的视觉体验。

如图2，是本发明的第二实施例。

图2是本实施例一种图片加载的方法的流程示意图。该方法应用在提供网络访问的服务器中。具体的，在服务器侧，本实施例公开的一种图片加载的方法，包括：

步骤201：接收客户端发送的获取图片的请求。客户端根据需求向服务器发送获取图片的请求，服务器接收客户端发送的获取图片的请求。该请求中包含图片的位置信息。

步骤202：根据请求生成图片的主色调值。

具体的，在本实施例的方法中，采用两种方式实现根据请求生成图片的主色调值，分别是：

方式一：从请求对应的统一资源定位符中获取图片的主色调值。具体的，根据数据库中存储的图片的颜色生成图片的主色调值，数据库中不仅存储该图片，还存储了该图片的多种属性信息，例如图片的尺寸、大小、清晰度、色彩、主色调、背景色等。服务器提前提取图片的主色调值或根据图片的颜色信息生成图片的主色调值。进一步，在服务器获取到该图片的主色调值后，将主色调值加入该图片的统一资源定位符(URL)中，形成包含图片的主色调值的URL，这样，就根据主色调值生成与图片对应的特殊的统一资源定位符。在需要获取图片的主色调值时，不再需要服务器到数据库中查找图片的主色调值，只需从该图片的URL中直接提取即可，提高获取图片的主色调值的速度。

或

方式二：在本实施例的方法中，根据请求生成图片的主色调值。具体的，在数据库中不仅存储该图片，还存储了该图片的多种属性信息，例如图片的尺寸、大小、清晰度、色彩、主色调、背景色等；则服务器根据请求从数据库中调取图片对应的主色调值，其中，主色调值为根据图片的颜色预先生成并保存在数据库中，并且建立图片的主色调值与该图片的关联关系。

可以理解的，上述生成图片的主色调值的过程在图片存储到数据库中时已经实现完成。图片的主色调的提取，包括通过方式一、方式二将图片的主色调融入图片的URL中或存储在数据库中，方便在需要时可直接调取。

步骤203：将生成的主色调值返回给客户端。在服务器获取图片的主色调值后，优先将生成的主色调值返回给客户端，服务器同时还在获取该图片，在服务器从数据库中成功下载图片后，将图片返回给客户端。可以理解，因图片的主色调值的占用存储空间的大小远远小于图片本身，导致能快速获取图片的主色调值并返回到客户端。

如图3，是本发明的第三实施例。

图3是本实施例一种图片加载的方法的流程示意图。第三实施例结合了第一实施例中客户端侧以及第二实施例服务器侧的工作流程，形成一个完整的系统，该系统包括客户端、服务器、以及对应的数据库。具体的，本实施例公开的一种图片加载的方法，包括：

步骤301：客户端向服务器发送获取图片的请求。具体的，用户在使用客户端进行浏览网页、听歌、购物、聊天的过程中，客户端需要显示一些图片，客户端根据需求向服务器发送获取图片的请求。例如，用户在浏览网页过程中，当点击进入一个网页后，网页中有需要加载的图片，服务器首先将图片的URL发送到浏览器的缓存中，此时，如果是用户首次打开该网页，则本地没有存储该图片，浏览器需要向服务器发送获取该图片的请求。

步骤302：服务器根据请求生成图片的主色调值，并将主色调值返回给客户端。

具体的，客户端根据需求向服务器发送获取图片的请求，服务器接收客户端发送的获取图片的请求。

优选地，在本实施例的方法中，服务器根据请求生成图片的主色调值，具体的，在本实施例的方法中，采用两种方式实现根据请求生成图片的主色调值，分别是：

方式一：从请求对应的统一资源定位符中获取图片的主色调值。具体的，根据数据库中存储的图片的颜色生成图片的主色调值，数据库中不仅存储该图片，还存储了该图片的多种属性信息，例如图片的尺寸、大小、清晰度、色彩、主色调、背景色等。服务器提前提取图片的主色调值或根据图片的颜色信息生成图片的主色调值。进一步，在服务器获取到该图片的主色调值后，将主色调值加入该图片的统一资源定位符(URL)中，形成包含图片的主色调值的URL，这样，就根据主色调值生成图片对应的特殊的统一资源定位符。在需要获取图片的主色调值时，不再需要服务器到数据库中查找图片的主色调值，只需从该图片的URL中直接提取即可，提高获取图片的主色调值的速度。

或

方式二：在本实施例的方法中，根据请求生成图片的主色调值。具体的，在数据库中不仅存储该图片，还存储了该图片的多种属性信息，例如图片的尺寸、大小、清晰度、色彩、主色调、背景色等；则服务器根据请求从数据库中调取图片对应的主色调值，其中，主色调值为根据图片的颜色预先生成并保存在数据库中，并且建立图片的主色调值与该图片的关联关系。

可以理解的，上述生成图片的主色调值的过程在图片存储到数据库中时已经实现完成。图片的主色调的提取，包括通过方式一、方式二将图片的主色调融入图片的URL中或存储在数据库中，方便在需要时可直接调取。

进一步，将生成的主色调值返回给客户端。具体的，在服务器获取图片的主色调值后，优先将生成的主色调值返回给客户端，可以理解，服务器同时还在获取该图片，在服务器从数据库中成功下载图片后，将图片返回给客户端。可以理解，因图片的主色调值的占用存储空间的大小远远小于图片本身，导致能快速获取图片的主色调值并返回到客户端。

步骤303：客户端加载图片，且在客户端加载完图片前将图片的显示区域显示为主色调值对应的颜色。

在客户端接收到图片后，在该图片的显示区域显示图片。显示过程可采用一次性显示、或边下载边显示，即将接收到的图片内容及时显示在图片显示区域。可以理解，加载图片后，会覆盖掉图片的显示区域原有的显示内容，比如图片的主色调值。

具体的，在实际使用客户端加载图片过程中，因为图片较大或网速较慢，客户端从发出获取图片请求到接收到图片需要一定的时间，有时该时间还较长，在这期间，图片的显示区域一直处于空白状态。相比与图片本身，图片的主色调值占用存储空间却很小，瞬间即可完成接收。因此，为避免图片的显示区域长时间处于空白状态，客户端首先调用接收到的图片的主色调值对应的颜色来填充(渲染)图片的显示区域。这样，在客户端接收到图片，再加载图片的过程过渡比较柔和，保持页面的整体协调，可提高用户的视觉体验。

进一步，在图片加载完成后，客户端调用缓存区内的图片，在图片的显示区域显示图片。因之前在图片显示区域已经渲染了该图片的主色调，且该主色调与图片整体颜色分布一样，会使图片的加载过程比较柔和，不会引起加载前后的巨大差别，使用户感觉比较舒服，提高了用户的使用体验。

如图4，是本发明的第四实施例。

图4是本实施例一种图片加载的装置的结构示意图；该图片加载的装置应用与接入互联网的客户端，客户端包括但不限于：访问万维网的网页浏览器、收寄电子邮件时的电子邮件客户端、以及即时通讯的客户端软件等，也包括智能手机终端中的应用程序；用户在智能手机终端上打开浏览器或打开APP进行浏览网页、听歌、购物、聊天等等。具体的，本实施例公开的一种图片加载的装置，包括：请求发送单元401、主色调值接收单元402、第一加载单元403、第二加载单元404，以下进行详细说明。

请求发送单元401，用于向服务器发送获取图片的请求。

具体的，用户在使用客户端进行浏览网页、听歌、购物、聊天的过程中，客户端需要显示一些图片，客户端根据需求向服务器发送获取图片的请求。例如，用户在浏览网页过程中，当点击进入一个网页后，网页中有需要加载的图片，服务器首先将图片的URL发送到浏览器的缓存中，此时，如果是用户首次打开该网页，则本地没有存储该图片，浏览器需要向服务器发送获取该图片的请求。

主色调值接收单元402，用于接收服务器根据请求返回的图片的主色调值。

具体的，在客户端向服务器发送获取图片的请求后，服务器会根据图片的URL在数据库中查找定位到该图片，数据库中不仅存储该图片，还存储了图片的多种属性信息，例如图片的尺寸、大小、清晰度、色彩、主色调、背景色等，服务器根据客户端的获取图片请求，将定位到的图片以及图片的属性信息下载到服务器上，例如将图片的主色调值下载到服务器上，服务器再将图片以及图片的主色调值发送到客户端，客户端接收服务器根据请求返回的图片以及图片的主色调值。

第一加载单元403，用于加载图片。在客户端接收到图片后，在图片的显示区域显示图片。显示过程可采用一次性显示、或边下载边显示，即将接收到的图片内容及时显示在图片显示区域。可以理解，加载图片后，会覆盖掉图片的显示区域原有的显示内容，比如图片的主色调值。

第二加载单元404，用于在图片加载完成前将图片的显示区域显示为主色调值对应的颜色。

具体的，在实际使用客户端加载图片过程中，因为图片较大或网速较慢，客户端从发出获取图片请求到接收到图片需要一定的时间，有时该时间还较长，而图片的主色调值却很小，瞬间即可完成接收。因此，为避免图片加载区域长时间处于空白状态，在这个过程中，客户端首先调用接收到的图片的主色调值对应的颜色来渲染和填充图片加载区域，使得图片加载区域看起来比较柔和，保持页面的整体协调，可提高用户的使用体验。

进一步，在图片加载完成后，客户端调用缓存区内的图片，在图片的显示区域显示图片。因之前在图片显示区域已经渲染了图片的主色调，且该主色调与图片整体颜色分布一样，会使图片的加载过程比较柔和，过度不明显，不会引起加载前后的巨大差别，使用户感觉比较舒服，提高了用户的使用体验。

如图5，是本发明的第五实施例。

图5是本实施例一种图片加载的装置的结构示意图。本实施例公开的一种图片加载的装置，包括：请求接收单元501、主色调值生成单元502、主色调值发送单元503，以下进行详细说明。

请求接收单元501，用于接收客户端发送的获取图片的请求。客户端根据需求向服务器发送获取图片的请求，服务器接收客户端发送的获取图片的请求。

主色调值生成单元502，用于根据请求生成图片的主色调值。

具体的，在本实施例的装置中，采用两种方式实现根据请求生成图片的主色调值，分别是：

方式一：从请求对应的统一资源定位符中获取图片的主色调值。具体的，根据数据库中存储的图片的颜色生成图片的主色调值，在数据库中不仅存储该图片，还存储了该图片的多种属性信息，例如图片的尺寸、大小、清晰度、色彩、主色调、背景色等；服务器提前提取图片的主色调值或根据图片的颜色信息生产图片的主色调值。进一步，在服务器获取到该图片的主色调值后，将主色调值加入该图片的URL中，形成包含图片主色调值的URL，这样，就根据主色调值生成图片对应的统一资源定位符。在需要获取图片的主色调值时，不再需要服务器到数据库中查找图片的主色调值，只需从该图片的URL中提取即可，提高获取图片的主色调值的速度。

或

方式二：在本实施例的装置中，根据请求生成图片的主色调值，在数据库中不仅存储该图片，还存储了该图片的多种属性信息，例如图片的尺寸、大小、清晰度、色彩、主色调、背景色等；则服务器根据请求从数据库中调取图片对应的主色调值，其中，主色调值为根据图片的颜色预先生成并保存在数据库中，并且建立图片的主色调值与该图片的关联关系。

可以理解的，上述生成图片的主色调值的过程在图片存储到数据库中时已经实现图片的主色调的提取，以及根据方式一或方式二将图片的主色调融入图片的URL中或存储在数据库中，方便使用时调取。

主色调值发送单元503，用于将生成的主色调值返回给客户端。

在服务器获取图片的主色调值后，优先将生成的主色调值返回给客户端，可以理解，服务器同时还在获取该图片，在服务器从数据库中成功下载该图片后，将图片返回给客户端。

以上实施例只为说明本实施例的技术构思及特点，其目的在于让熟悉此项技术的人士能够了解本实施例的内容并据此实施，并不能限制本实施例的保护范围。凡跟本实施例权利要求范围所做的均等变化与修饰，均应属于本实施例权利要求的涵盖范围。

Claims (10)

1.一种图片加载的方法，其特征在于，包括：

向服务器发送获取图片的请求；

接收所述服务器根据所述请求返回的所述图片的主色调值；

加载所述图片，且在所述图片加载完成前将所述图片的显示区域显示为所述主色调值对应的颜色。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在所述图片加载完成后，在所述图片的显示区域显示所述图片。

3.一种图片加载的方法，其特征在于，包括：

接收客户端发送的获取图片的请求；

根据所述请求生成所述图片的主色调值；

将生成的所述主色调值返回给所述客户端。

4.根据权利要求3所述的方法，其特征在于，所述根据所述请求生成所述图片的主色调值，包括：

从所述请求对应的统一资源定位符中获取所述图片的主色调值。

5.根据权利要求4所述的方法，其特征在于，所述方法还包括：

根据数据库中存储的所述图片的颜色生成所述图片的主色调值；

根据所述主色调值生成所述图片对应的统一资源定位符。

6.根据权利要求3所述的方法，其特征在于，所述根据所述请求生成所述图片的主色调值，包括：

根据所述请求从数据库中调取所述图片对应的主色调值，其中，所述主色调值为根据所述图片的颜色预先生成并保存在所述数据库中。

7.一种图片加载的方法，其特征在于，包括：

客户端向服务器发送获取图片的请求；

所述服务器根据所述请求生成所述图片的主色调值，并将所述主色调值返回给所述客户端；

所述客户端加载所述图片，且在所述客户端加载完所述图片前将所述图片的显示区域显示为所述主色调值对应的颜色。

8.根据权利要求7所述的方法，其特征在于，所述服务器根据所述请求生成所述图片的主色调值，包括：

所述服务器从所述请求对应的统一资源定位符中获取所述图片的主色调值。

9.一种图片加载的装置，其特征在于，包括：

请求发送单元，用于向服务器发送获取图片的请求；

主色调值接收单元，用于接收所述服务器根据所述请求返回的所述图片的主色调值；

第一加载单元，用于加载所述图片；

第二加载单元，用于在所述图片加载完成前将所述图片的显示区域显示为所述主色调值对应的颜色。

10.一种图片加载的装置，其特征在于，包括：

请求接收单元，用于接收客户端发送的获取图片的请求；

主色调值生成单元，用于根据所述请求生成所述图片的主色调值；

主色调值发送单元，用于将生成的所述主色调值返回给所述客户端。