本發(fā)明涉及互聯(lián)網(wǎng)領(lǐng)域，更具體地說，涉及一種圖片加載的方法及裝置。

背景技術(shù)：

統(tǒng)一資源定位符(URL)是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。互聯(lián)網(wǎng)上的每個(gè)文件都有一個(gè)唯一的URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。統(tǒng)一資源定位符是統(tǒng)一資源標(biāo)志符的一個(gè)下種，統(tǒng)一資源標(biāo)志符確定一個(gè)資源，而統(tǒng)一資源定位符不但確定一個(gè)資源，而且還表示出它在哪里。在圖片加載過程中，每個(gè)待加載圖片都有一個(gè)相應(yīng)的URL，服務(wù)器可根據(jù)圖片的URL在數(shù)據(jù)庫中定位到該圖片，數(shù)據(jù)庫還保存有圖片的屬性信息。

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，用戶利用手機(jī)進(jìn)行越來越多的活動(dòng)，若瀏覽網(wǎng)頁、聽歌、購物、聊天等等，用戶在打開瀏覽器或打開APP時(shí)，瀏覽器或APP一般會(huì)加載一些圖片，由于圖片相較于文字一般較大，所以當(dāng)加載圖片時(shí)，若網(wǎng)絡(luò)不穩(wěn)定或網(wǎng)速不快的話，往往在文字顯示完成后，圖片顯示之前會(huì)長時(shí)間處于空白狀態(tài)，在圖片從服務(wù)器下載完成后又突然加載，造成畫面的跳躍感，降低用戶視覺體驗(yàn)?；蛘?，在網(wǎng)絡(luò)較差時(shí)，也只能顯示圖片的頂端或者低端等次要部分，其余部分還是會(huì)呈現(xiàn)空白色，明顯不能滿足用戶需求。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明要解決的技術(shù)問題在于，針對現(xiàn)有技術(shù)的圖片成功加載前圖片顯示區(qū)域出現(xiàn)空白的缺陷，提供一種圖片加載的方法及裝置。

本發(fā)明解決其技術(shù)問題所采用的技術(shù)方案是：構(gòu)造一種圖片加載的方法，包括：

向服務(wù)器發(fā)送獲取圖片的請求；

接收所述服務(wù)器根據(jù)所述請求返回的所述圖片的主色調(diào)值；

加載所述圖片，且在所述圖片加載完成前將所述圖片的顯示區(qū)域顯示為所述主色調(diào)值對應(yīng)的顏色。

進(jìn)一步，本發(fā)明所述的方法還包括：

在所述圖片加載完成后，在所述圖片的顯示區(qū)域顯示所述圖片。

另一方面，本發(fā)明還公開一種圖片加載的方法，包括：

接收客戶端發(fā)送的獲取圖片的請求；

根據(jù)所述請求生成所述圖片的主色調(diào)值；

將生成的所述主色調(diào)值返回給所述客戶端。

優(yōu)選地，在本發(fā)明所述的方法中，所述根據(jù)所述請求生成所述圖片的主色調(diào)值，包括：

從所述請求對應(yīng)的統(tǒng)一資源定位符中獲取所述圖片的主色調(diào)值。

優(yōu)選地，在本發(fā)明所述的方法中，還包括：

根據(jù)數(shù)據(jù)庫中存儲(chǔ)的所述圖片的顏色生成所述圖片的主色調(diào)值；

根據(jù)所述主色調(diào)值生成所述圖片對應(yīng)的統(tǒng)一資源定位符。

優(yōu)選地，在本發(fā)明所述的方法中，所述根據(jù)所述請求生成所述圖片的主色調(diào)值，包括：

根據(jù)所述請求從數(shù)據(jù)庫中調(diào)取所述圖片對應(yīng)的主色調(diào)值，其中，所述主色調(diào)值為根據(jù)所述圖片的顏色預(yù)先生成并保存在所述數(shù)據(jù)庫中。

另一方面，本發(fā)明還公開一種圖片加載的方法，包括：

客戶端向服務(wù)器發(fā)送獲取圖片的請求；

所述服務(wù)器根據(jù)所述請求生成所述圖片的主色調(diào)值，并將所述主色調(diào)值返回給所述客戶端；

所述客戶端加載所述圖片，且在所述客戶端加載完所述圖片前將所述圖片的顯示區(qū)域顯示為所述主色調(diào)值對應(yīng)的顏色。

優(yōu)選地，在本發(fā)明所述的方法中，所述服務(wù)器根據(jù)所述請求生成所述圖片的主色調(diào)值，包括：

所述服務(wù)器從所述請求對應(yīng)的統(tǒng)一資源定位符中獲取所述圖片的主色調(diào)值。

另一方面，本發(fā)明還公開一種圖片加載的裝置，包括：

請求發(fā)送單元，用于向服務(wù)器發(fā)送獲取圖片的請求；

主色調(diào)值接收單元，用于接收所述服務(wù)器根據(jù)所述請求返回的所述圖片的主色調(diào)值；

第一加載單元，用于加載所述圖片；

第二加載單元，用于在所述圖片加載完成前將所述圖片的顯示區(qū)域顯示為所述主色調(diào)值對應(yīng)的顏色。

另一方面，本發(fā)明還公開一種圖片加載的裝置，包括：

請求接收單元，用于接收客戶端發(fā)送的獲取圖片的請求；

主色調(diào)值生成單元，用于根據(jù)所述請求生成所述圖片的主色調(diào)值；

主色調(diào)值發(fā)送單元，用于將生成的所述主色調(diào)值返回給所述客戶端。

實(shí)施本發(fā)明的一種圖片加載的方法及裝置，具有以下有益效果：圖片加載的方法包括：客戶端向服務(wù)器發(fā)送獲取圖片的請求；所述服務(wù)器根據(jù)所述請求生成所述圖片的主色調(diào)值，其中，從所述請求對應(yīng)的統(tǒng)一資源定位符中獲取所述圖片的主色調(diào)值、或根據(jù)所述請求從數(shù)據(jù)庫中調(diào)取所述圖片對應(yīng)的主色調(diào)值；將所述主色調(diào)值返回給所述客戶端；所述客戶端加載所述圖片；在所述客戶端加載完所述圖片前將所述圖片的顯示區(qū)域顯示為所述主色調(diào)值對應(yīng)的顏色。通過實(shí)施本技術(shù)方案，能預(yù)先在圖片顯示區(qū)域顯示圖片的主色調(diào)，避免了圖片加載完成前出現(xiàn)一片空白，加載后反差較大的問題，提高用戶的使用體驗(yàn)。

附圖說明

下面將結(jié)合附圖及實(shí)施例對本發(fā)明作進(jìn)一步說明，附圖中：

圖1是本發(fā)明實(shí)施例提供的一種圖片加載的方法的流程示意圖；

圖2是本發(fā)明實(shí)施例提供的另一種圖片加載的方法的流程示意圖；

圖3是本發(fā)明實(shí)施例提供的一種圖片加載的方法的流程示意圖；

圖4是本發(fā)明實(shí)施例提供的一種圖片加載的裝置的結(jié)構(gòu)示意圖；

圖5是本發(fā)明實(shí)施例提供的另一種圖片加載的裝置的結(jié)構(gòu)示意圖。

具體實(shí)施方式

為了對本發(fā)明的技術(shù)特征、目的和效果有更加清楚的理解，現(xiàn)對照附圖詳細(xì)說明本發(fā)明的具體實(shí)施方式。

本發(fā)明針對現(xiàn)有技術(shù)的上述圖片成功加載前圖片顯示區(qū)域出現(xiàn)空白的缺陷，提供一種圖片加載的方法及裝置。該圖片加載的方法包括：客戶端向服務(wù)器發(fā)送獲取圖片的請求；服務(wù)器根據(jù)請求生成圖片的主色調(diào)值，其中，從請求對應(yīng)的統(tǒng)一資源定位符中獲取圖片的主色調(diào)值、或根據(jù)請求從數(shù)據(jù)庫中調(diào)取圖片對應(yīng)的主色調(diào)值；將主色調(diào)值返回給客戶端；客戶端加載圖片，且在客戶端加載完圖片前將圖片的顯示區(qū)域顯示為主色調(diào)值對應(yīng)的顏色。通過實(shí)施本技術(shù)方案，能預(yù)先在圖片顯示區(qū)域顯示圖片的主色調(diào)，避免了圖片加載完成前出現(xiàn)一片空白，加載后圖片顏色反差較大的問題，提高用戶的使用體驗(yàn)。具體通過以下幾個(gè)實(shí)施例進(jìn)行說明。

如圖1，是本發(fā)明的第一實(shí)施例。

如圖1所示，是本實(shí)施例的一種圖片加載的方法的流程示意圖。該圖片加載的方法應(yīng)用于接入互聯(lián)網(wǎng)的客戶端，客戶端包括但不限于：訪問萬維網(wǎng)的網(wǎng)頁瀏覽器、收寄電子郵件時(shí)的電子郵件客戶端、以及即時(shí)通訊的客戶端軟件等，也包括智能手機(jī)終端中的應(yīng)用程序。例如，用戶在智能手機(jī)終端上打開瀏覽器或打開APP進(jìn)行瀏覽網(wǎng)頁、聽歌、購物、聊天等等。具體的，在客戶端側(cè)，該圖片加載的方法包括：

步驟101：向服務(wù)器發(fā)送獲取圖片的請求。具體的，用戶在使用客戶端進(jìn)行瀏覽網(wǎng)頁、聽歌、購物、聊天的過程中，客戶端需要顯示一些圖片，客戶端根據(jù)需求向服務(wù)器發(fā)送獲取圖片的請求。例如，用戶在瀏覽網(wǎng)頁過程中，當(dāng)點(diǎn)擊進(jìn)入一個(gè)網(wǎng)頁后，網(wǎng)頁中有需要加載的圖片，服務(wù)器首先將該圖片的URL發(fā)送到瀏覽器的緩存中，此時(shí)，如果是用戶首次打開該網(wǎng)頁，則本地沒有存儲(chǔ)該圖片，瀏覽器需要向服務(wù)器發(fā)送獲取圖片的請求。

步驟102：接收服務(wù)器根據(jù)請求返回的圖片的主色調(diào)值。具體的，在客戶端向服務(wù)器發(fā)送獲取圖片的請求后，服務(wù)器會(huì)根據(jù)該圖片的URL在數(shù)據(jù)庫中查找并定位到該圖片。數(shù)據(jù)庫中不僅存儲(chǔ)該圖片，還存儲(chǔ)了圖片的多種屬性信息，例如圖片的尺寸、大小、清晰度、色彩、主色調(diào)、背景色等，其中，圖片的主色調(diào)值根據(jù)圖片的顏色生成。色調(diào)是指物體反射的光線中以哪種波長占優(yōu)勢來決定的，不同波長產(chǎn)生不同顏色的感覺，色調(diào)是顏色的重要的特征，它決定了顏色本質(zhì)的根本特征，主色調(diào)是對一幅圖片的整體顏色的概括評價(jià)，是指圖片色彩外觀的基本傾向。服務(wù)器根據(jù)客戶端的獲取圖片請求，將定位到的圖片以及圖片的屬性信息下載到服務(wù)器上，例如將圖片的主色調(diào)值下載到服務(wù)器上，服務(wù)器再將該圖片以及圖片的主色調(diào)值發(fā)送到客戶端，客戶端接收服務(wù)器根據(jù)請求返回的圖片以及圖片的主色調(diào)值，當(dāng)然，客戶端優(yōu)先接收到服務(wù)器返回的圖片的主色調(diào)值。

步驟103：加載圖片，且在圖片加載完成前將圖片的顯示區(qū)域顯示為主色調(diào)值對應(yīng)的顏色。

在客戶端接收到圖片后，在該圖片的顯示區(qū)域顯示圖片。顯示過程可采用一次性顯示、或邊下載邊顯示，即將接收到的圖片內(nèi)容及時(shí)顯示在圖片顯示區(qū)域?？梢岳斫猓虞d圖片后，會(huì)覆蓋掉圖片的顯示區(qū)域原有的顯示內(nèi)容，比如圖片的主色調(diào)值。

具體的，在實(shí)際使用客戶端加載圖片過程中，因?yàn)閳D片較大或網(wǎng)速較慢，客戶端從發(fā)出獲取圖片請求到接收到圖片需要一定的時(shí)間，有時(shí)該時(shí)間還較長，在這期間，圖片的顯示區(qū)域一直處于空白狀態(tài)。相比與圖片本身，圖片的主色調(diào)值占用存儲(chǔ)空間卻很小，瞬間即可完成接收。因此，為避免圖片的顯示區(qū)域長時(shí)間處于空白狀態(tài)，客戶端首先調(diào)用接收到的圖片的主色調(diào)值對應(yīng)的顏色來填充(渲染)圖片的顯示區(qū)域。這樣，在客戶端接收到圖片后，再加載圖片的過程過渡比較柔和，保持頁面的整體協(xié)調(diào)，可提高用戶的視覺體驗(yàn)。

進(jìn)一步，在圖片加載完成后，客戶端調(diào)用緩存區(qū)內(nèi)的圖片，在圖片的顯示區(qū)域顯示圖片。因之前在圖片顯示區(qū)域已經(jīng)渲染了該圖片的主色調(diào)，且該主色調(diào)與該圖片整體顏色分布一樣，會(huì)使圖片的加載過程比較柔和，不會(huì)引起加載前后的巨大差別，使用戶感覺比較舒服，提高了用戶的視覺體驗(yàn)。

如圖2，是本發(fā)明的第二實(shí)施例。

圖2是本實(shí)施例一種圖片加載的方法的流程示意圖。該方法應(yīng)用在提供網(wǎng)絡(luò)訪問的服務(wù)器中。具體的，在服務(wù)器側(cè)，本實(shí)施例公開的一種圖片加載的方法，包括：

步驟201：接收客戶端發(fā)送的獲取圖片的請求?？蛻舳烁鶕?jù)需求向服務(wù)器發(fā)送獲取圖片的請求，服務(wù)器接收客戶端發(fā)送的獲取圖片的請求。該請求中包含圖片的位置信息。

步驟202：根據(jù)請求生成圖片的主色調(diào)值。

具體的，在本實(shí)施例的方法中，采用兩種方式實(shí)現(xiàn)根據(jù)請求生成圖片的主色調(diào)值，分別是：

方式一：從請求對應(yīng)的統(tǒng)一資源定位符中獲取圖片的主色調(diào)值。具體的，根據(jù)數(shù)據(jù)庫中存儲(chǔ)的圖片的顏色生成圖片的主色調(diào)值，數(shù)據(jù)庫中不僅存儲(chǔ)該圖片，還存儲(chǔ)了該圖片的多種屬性信息，例如圖片的尺寸、大小、清晰度、色彩、主色調(diào)、背景色等。服務(wù)器提前提取圖片的主色調(diào)值或根據(jù)圖片的顏色信息生成圖片的主色調(diào)值。進(jìn)一步，在服務(wù)器獲取到該圖片的主色調(diào)值后，將主色調(diào)值加入該圖片的統(tǒng)一資源定位符(URL)中，形成包含圖片的主色調(diào)值的URL，這樣，就根據(jù)主色調(diào)值生成與圖片對應(yīng)的特殊的統(tǒng)一資源定位符。在需要獲取圖片的主色調(diào)值時(shí)，不再需要服務(wù)器到數(shù)據(jù)庫中查找圖片的主色調(diào)值，只需從該圖片的URL中直接提取即可，提高獲取圖片的主色調(diào)值的速度。

或

方式二：在本實(shí)施例的方法中，根據(jù)請求生成圖片的主色調(diào)值。具體的，在數(shù)據(jù)庫中不僅存儲(chǔ)該圖片，還存儲(chǔ)了該圖片的多種屬性信息，例如圖片的尺寸、大小、清晰度、色彩、主色調(diào)、背景色等；則服務(wù)器根據(jù)請求從數(shù)據(jù)庫中調(diào)取圖片對應(yīng)的主色調(diào)值，其中，主色調(diào)值為根據(jù)圖片的顏色預(yù)先生成并保存在數(shù)據(jù)庫中，并且建立圖片的主色調(diào)值與該圖片的關(guān)聯(lián)關(guān)系。

可以理解的，上述生成圖片的主色調(diào)值的過程在圖片存儲(chǔ)到數(shù)據(jù)庫中時(shí)已經(jīng)實(shí)現(xiàn)完成。圖片的主色調(diào)的提取，包括通過方式一、方式二將圖片的主色調(diào)融入圖片的URL中或存儲(chǔ)在數(shù)據(jù)庫中，方便在需要時(shí)可直接調(diào)取。

步驟203：將生成的主色調(diào)值返回給客戶端。在服務(wù)器獲取圖片的主色調(diào)值后，優(yōu)先將生成的主色調(diào)值返回給客戶端，服務(wù)器同時(shí)還在獲取該圖片，在服務(wù)器從數(shù)據(jù)庫中成功下載圖片后，將圖片返回給客戶端。可以理解，因圖片的主色調(diào)值的占用存儲(chǔ)空間的大小遠(yuǎn)遠(yuǎn)小于圖片本身，導(dǎo)致能快速獲取圖片的主色調(diào)值并返回到客戶端。

如圖3，是本發(fā)明的第三實(shí)施例。

圖3是本實(shí)施例一種圖片加載的方法的流程示意圖。第三實(shí)施例結(jié)合了第一實(shí)施例中客戶端側(cè)以及第二實(shí)施例服務(wù)器側(cè)的工作流程，形成一個(gè)完整的系統(tǒng)，該系統(tǒng)包括客戶端、服務(wù)器、以及對應(yīng)的數(shù)據(jù)庫。具體的，本實(shí)施例公開的一種圖片加載的方法，包括：

步驟301：客戶端向服務(wù)器發(fā)送獲取圖片的請求。具體的，用戶在使用客戶端進(jìn)行瀏覽網(wǎng)頁、聽歌、購物、聊天的過程中，客戶端需要顯示一些圖片，客戶端根據(jù)需求向服務(wù)器發(fā)送獲取圖片的請求。例如，用戶在瀏覽網(wǎng)頁過程中，當(dāng)點(diǎn)擊進(jìn)入一個(gè)網(wǎng)頁后，網(wǎng)頁中有需要加載的圖片，服務(wù)器首先將圖片的URL發(fā)送到瀏覽器的緩存中，此時(shí)，如果是用戶首次打開該網(wǎng)頁，則本地沒有存儲(chǔ)該圖片，瀏覽器需要向服務(wù)器發(fā)送獲取該圖片的請求。

步驟302：服務(wù)器根據(jù)請求生成圖片的主色調(diào)值，并將主色調(diào)值返回給客戶端。

具體的，客戶端根據(jù)需求向服務(wù)器發(fā)送獲取圖片的請求，服務(wù)器接收客戶端發(fā)送的獲取圖片的請求。

優(yōu)選地，在本實(shí)施例的方法中，服務(wù)器根據(jù)請求生成圖片的主色調(diào)值，具體的，在本實(shí)施例的方法中，采用兩種方式實(shí)現(xiàn)根據(jù)請求生成圖片的主色調(diào)值，分別是：

方式一：從請求對應(yīng)的統(tǒng)一資源定位符中獲取圖片的主色調(diào)值。具體的，根據(jù)數(shù)據(jù)庫中存儲(chǔ)的圖片的顏色生成圖片的主色調(diào)值，數(shù)據(jù)庫中不僅存儲(chǔ)該圖片，還存儲(chǔ)了該圖片的多種屬性信息，例如圖片的尺寸、大小、清晰度、色彩、主色調(diào)、背景色等。服務(wù)器提前提取圖片的主色調(diào)值或根據(jù)圖片的顏色信息生成圖片的主色調(diào)值。進(jìn)一步，在服務(wù)器獲取到該圖片的主色調(diào)值后，將主色調(diào)值加入該圖片的統(tǒng)一資源定位符(URL)中，形成包含圖片的主色調(diào)值的URL，這樣，就根據(jù)主色調(diào)值生成圖片對應(yīng)的特殊的統(tǒng)一資源定位符。在需要獲取圖片的主色調(diào)值時(shí)，不再需要服務(wù)器到數(shù)據(jù)庫中查找圖片的主色調(diào)值，只需從該圖片的URL中直接提取即可，提高獲取圖片的主色調(diào)值的速度。

或

方式二：在本實(shí)施例的方法中，根據(jù)請求生成圖片的主色調(diào)值。具體的，在數(shù)據(jù)庫中不僅存儲(chǔ)該圖片，還存儲(chǔ)了該圖片的多種屬性信息，例如圖片的尺寸、大小、清晰度、色彩、主色調(diào)、背景色等；則服務(wù)器根據(jù)請求從數(shù)據(jù)庫中調(diào)取圖片對應(yīng)的主色調(diào)值，其中，主色調(diào)值為根據(jù)圖片的顏色預(yù)先生成并保存在數(shù)據(jù)庫中，并且建立圖片的主色調(diào)值與該圖片的關(guān)聯(lián)關(guān)系。

可以理解的，上述生成圖片的主色調(diào)值的過程在圖片存儲(chǔ)到數(shù)據(jù)庫中時(shí)已經(jīng)實(shí)現(xiàn)完成。圖片的主色調(diào)的提取，包括通過方式一、方式二將圖片的主色調(diào)融入圖片的URL中或存儲(chǔ)在數(shù)據(jù)庫中，方便在需要時(shí)可直接調(diào)取。

進(jìn)一步，將生成的主色調(diào)值返回給客戶端。具體的，在服務(wù)器獲取圖片的主色調(diào)值后，優(yōu)先將生成的主色調(diào)值返回給客戶端，可以理解，服務(wù)器同時(shí)還在獲取該圖片，在服務(wù)器從數(shù)據(jù)庫中成功下載圖片后，將圖片返回給客戶端。可以理解，因圖片的主色調(diào)值的占用存儲(chǔ)空間的大小遠(yuǎn)遠(yuǎn)小于圖片本身，導(dǎo)致能快速獲取圖片的主色調(diào)值并返回到客戶端。

步驟303：客戶端加載圖片，且在客戶端加載完圖片前將圖片的顯示區(qū)域顯示為主色調(diào)值對應(yīng)的顏色。

在客戶端接收到圖片后，在該圖片的顯示區(qū)域顯示圖片。顯示過程可采用一次性顯示、或邊下載邊顯示，即將接收到的圖片內(nèi)容及時(shí)顯示在圖片顯示區(qū)域?？梢岳斫猓虞d圖片后，會(huì)覆蓋掉圖片的顯示區(qū)域原有的顯示內(nèi)容，比如圖片的主色調(diào)值。

具體的，在實(shí)際使用客戶端加載圖片過程中，因?yàn)閳D片較大或網(wǎng)速較慢，客戶端從發(fā)出獲取圖片請求到接收到圖片需要一定的時(shí)間，有時(shí)該時(shí)間還較長，在這期間，圖片的顯示區(qū)域一直處于空白狀態(tài)。相比與圖片本身，圖片的主色調(diào)值占用存儲(chǔ)空間卻很小，瞬間即可完成接收。因此，為避免圖片的顯示區(qū)域長時(shí)間處于空白狀態(tài)，客戶端首先調(diào)用接收到的圖片的主色調(diào)值對應(yīng)的顏色來填充(渲染)圖片的顯示區(qū)域。這樣，在客戶端接收到圖片，再加載圖片的過程過渡比較柔和，保持頁面的整體協(xié)調(diào)，可提高用戶的視覺體驗(yàn)。

進(jìn)一步，在圖片加載完成后，客戶端調(diào)用緩存區(qū)內(nèi)的圖片，在圖片的顯示區(qū)域顯示圖片。因之前在圖片顯示區(qū)域已經(jīng)渲染了該圖片的主色調(diào)，且該主色調(diào)與圖片整體顏色分布一樣，會(huì)使圖片的加載過程比較柔和，不會(huì)引起加載前后的巨大差別，使用戶感覺比較舒服，提高了用戶的使用體驗(yàn)。

如圖4，是本發(fā)明的第四實(shí)施例。

圖4是本實(shí)施例一種圖片加載的裝置的結(jié)構(gòu)示意圖；該圖片加載的裝置應(yīng)用與接入互聯(lián)網(wǎng)的客戶端，客戶端包括但不限于：訪問萬維網(wǎng)的網(wǎng)頁瀏覽器、收寄電子郵件時(shí)的電子郵件客戶端、以及即時(shí)通訊的客戶端軟件等，也包括智能手機(jī)終端中的應(yīng)用程序；用戶在智能手機(jī)終端上打開瀏覽器或打開APP進(jìn)行瀏覽網(wǎng)頁、聽歌、購物、聊天等等。具體的，本實(shí)施例公開的一種圖片加載的裝置，包括：請求發(fā)送單元401、主色調(diào)值接收單元402、第一加載單元403、第二加載單元404，以下進(jìn)行詳細(xì)說明。

請求發(fā)送單元401，用于向服務(wù)器發(fā)送獲取圖片的請求。

具體的，用戶在使用客戶端進(jìn)行瀏覽網(wǎng)頁、聽歌、購物、聊天的過程中，客戶端需要顯示一些圖片，客戶端根據(jù)需求向服務(wù)器發(fā)送獲取圖片的請求。例如，用戶在瀏覽網(wǎng)頁過程中，當(dāng)點(diǎn)擊進(jìn)入一個(gè)網(wǎng)頁后，網(wǎng)頁中有需要加載的圖片，服務(wù)器首先將圖片的URL發(fā)送到瀏覽器的緩存中，此時(shí)，如果是用戶首次打開該網(wǎng)頁，則本地沒有存儲(chǔ)該圖片，瀏覽器需要向服務(wù)器發(fā)送獲取該圖片的請求。

主色調(diào)值接收單元402，用于接收服務(wù)器根據(jù)請求返回的圖片的主色調(diào)值。

具體的，在客戶端向服務(wù)器發(fā)送獲取圖片的請求后，服務(wù)器會(huì)根據(jù)圖片的URL在數(shù)據(jù)庫中查找定位到該圖片，數(shù)據(jù)庫中不僅存儲(chǔ)該圖片，還存儲(chǔ)了圖片的多種屬性信息，例如圖片的尺寸、大小、清晰度、色彩、主色調(diào)、背景色等，服務(wù)器根據(jù)客戶端的獲取圖片請求，將定位到的圖片以及圖片的屬性信息下載到服務(wù)器上，例如將圖片的主色調(diào)值下載到服務(wù)器上，服務(wù)器再將圖片以及圖片的主色調(diào)值發(fā)送到客戶端，客戶端接收服務(wù)器根據(jù)請求返回的圖片以及圖片的主色調(diào)值。

第一加載單元403，用于加載圖片。在客戶端接收到圖片后，在圖片的顯示區(qū)域顯示圖片。顯示過程可采用一次性顯示、或邊下載邊顯示，即將接收到的圖片內(nèi)容及時(shí)顯示在圖片顯示區(qū)域?？梢岳斫猓虞d圖片后，會(huì)覆蓋掉圖片的顯示區(qū)域原有的顯示內(nèi)容，比如圖片的主色調(diào)值。

第二加載單元404，用于在圖片加載完成前將圖片的顯示區(qū)域顯示為主色調(diào)值對應(yīng)的顏色。

具體的，在實(shí)際使用客戶端加載圖片過程中，因?yàn)閳D片較大或網(wǎng)速較慢，客戶端從發(fā)出獲取圖片請求到接收到圖片需要一定的時(shí)間，有時(shí)該時(shí)間還較長，而圖片的主色調(diào)值卻很小，瞬間即可完成接收。因此，為避免圖片加載區(qū)域長時(shí)間處于空白狀態(tài)，在這個(gè)過程中，客戶端首先調(diào)用接收到的圖片的主色調(diào)值對應(yīng)的顏色來渲染和填充圖片加載區(qū)域，使得圖片加載區(qū)域看起來比較柔和，保持頁面的整體協(xié)調(diào)，可提高用戶的使用體驗(yàn)。

進(jìn)一步，在圖片加載完成后，客戶端調(diào)用緩存區(qū)內(nèi)的圖片，在圖片的顯示區(qū)域顯示圖片。因之前在圖片顯示區(qū)域已經(jīng)渲染了圖片的主色調(diào)，且該主色調(diào)與圖片整體顏色分布一樣，會(huì)使圖片的加載過程比較柔和，過度不明顯，不會(huì)引起加載前后的巨大差別，使用戶感覺比較舒服，提高了用戶的使用體驗(yàn)。

如圖5，是本發(fā)明的第五實(shí)施例。

圖5是本實(shí)施例一種圖片加載的裝置的結(jié)構(gòu)示意圖。本實(shí)施例公開的一種圖片加載的裝置，包括：請求接收單元501、主色調(diào)值生成單元502、主色調(diào)值發(fā)送單元503，以下進(jìn)行詳細(xì)說明。

請求接收單元501，用于接收客戶端發(fā)送的獲取圖片的請求?？蛻舳烁鶕?jù)需求向服務(wù)器發(fā)送獲取圖片的請求，服務(wù)器接收客戶端發(fā)送的獲取圖片的請求。

主色調(diào)值生成單元502，用于根據(jù)請求生成圖片的主色調(diào)值。

具體的，在本實(shí)施例的裝置中，采用兩種方式實(shí)現(xiàn)根據(jù)請求生成圖片的主色調(diào)值，分別是：

方式一：從請求對應(yīng)的統(tǒng)一資源定位符中獲取圖片的主色調(diào)值。具體的，根據(jù)數(shù)據(jù)庫中存儲(chǔ)的圖片的顏色生成圖片的主色調(diào)值，在數(shù)據(jù)庫中不僅存儲(chǔ)該圖片，還存儲(chǔ)了該圖片的多種屬性信息，例如圖片的尺寸、大小、清晰度、色彩、主色調(diào)、背景色等；服務(wù)器提前提取圖片的主色調(diào)值或根據(jù)圖片的顏色信息生產(chǎn)圖片的主色調(diào)值。進(jìn)一步，在服務(wù)器獲取到該圖片的主色調(diào)值后，將主色調(diào)值加入該圖片的URL中，形成包含圖片主色調(diào)值的URL，這樣，就根據(jù)主色調(diào)值生成圖片對應(yīng)的統(tǒng)一資源定位符。在需要獲取圖片的主色調(diào)值時(shí)，不再需要服務(wù)器到數(shù)據(jù)庫中查找圖片的主色調(diào)值，只需從該圖片的URL中提取即可，提高獲取圖片的主色調(diào)值的速度。

或

方式二：在本實(shí)施例的裝置中，根據(jù)請求生成圖片的主色調(diào)值，在數(shù)據(jù)庫中不僅存儲(chǔ)該圖片，還存儲(chǔ)了該圖片的多種屬性信息，例如圖片的尺寸、大小、清晰度、色彩、主色調(diào)、背景色等；則服務(wù)器根據(jù)請求從數(shù)據(jù)庫中調(diào)取圖片對應(yīng)的主色調(diào)值，其中，主色調(diào)值為根據(jù)圖片的顏色預(yù)先生成并保存在數(shù)據(jù)庫中，并且建立圖片的主色調(diào)值與該圖片的關(guān)聯(lián)關(guān)系。

可以理解的，上述生成圖片的主色調(diào)值的過程在圖片存儲(chǔ)到數(shù)據(jù)庫中時(shí)已經(jīng)實(shí)現(xiàn)圖片的主色調(diào)的提取，以及根據(jù)方式一或方式二將圖片的主色調(diào)融入圖片的URL中或存儲(chǔ)在數(shù)據(jù)庫中，方便使用時(shí)調(diào)取。

主色調(diào)值發(fā)送單元503，用于將生成的主色調(diào)值返回給客戶端。

在服務(wù)器獲取圖片的主色調(diào)值后，優(yōu)先將生成的主色調(diào)值返回給客戶端，可以理解，服務(wù)器同時(shí)還在獲取該圖片，在服務(wù)器從數(shù)據(jù)庫中成功下載該圖片后，將圖片返回給客戶端。

以上實(shí)施例只為說明本實(shí)施例的技術(shù)構(gòu)思及特點(diǎn)，其目的在于讓熟悉此項(xiàng)技術(shù)的人士能夠了解本實(shí)施例的內(nèi)容并據(jù)此實(shí)施，并不能限制本實(shí)施例的保護(hù)范圍。凡跟本實(shí)施例權(quán)利要求范圍所做的均等變化與修飾，均應(yīng)屬于本實(shí)施例權(quán)利要求的涵蓋范圍。