本發明涉及互聯網領域，更具體地說，涉及一種圖片加載的方法及裝置。

背景技術：

統一資源定位符(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，用于將生成的主色調值返回給客戶端。

在服務器獲取圖片的主色調值后，優先將生成的主色調值返回給客戶端，可以理解，服務器同時還在獲取該圖片，在服務器從數據庫中成功下載該圖片后，將圖片返回給客戶端。

以上實施例只為說明本實施例的技術構思及特點，其目的在于讓熟悉此項技術的人士能夠了解本實施例的內容并據此實施，并不能限制本實施例的保護范圍。凡跟本實施例權利要求范圍所做的均等變化與修飾，均應屬于本實施例權利要求的涵蓋范圍。