本發(fā)明涉及網頁前端設計領域，具體涉及一種圖片呈現的方法以及圖片呈現裝置。

背景技術：

隨著計算機技術以及瀏覽器技術的快速發(fā)展，萬維網Web前端應用發(fā)展得越發(fā)復雜與龐大。圖片資源作為應用評價指標之一，與用戶的交互越來越密切。當瀏覽器頻繁載入大量高質量圖片資源時，用戶不得不被動的面對停滯的瀏覽器頁面以等待資源加載完畢。當網絡受到影響甚至中斷的時候，會導致最終圖片資源渲染失敗或者頁面呈現不完整等結果。這些都會使得用戶受到不同程度的負面體驗。

在現有技術中，通過加載等待動畫過場特效使得用戶的注意力得以轉移，雖然該方法或可間接延長用戶耐心度，但是當諸多圖片同時加載的時候，會影響頁面整體觀賞性和一致性，并且始終單一的動畫無法從根本上挽救用戶體驗，導致用戶打開網頁時，視覺體驗低。

技術實現要素：

本發(fā)明實施例提供了一種圖片呈現的方法以及圖片呈現裝置，用于當用戶打開網頁時，提高用戶的視覺體驗。

本發(fā)明實施例第一方面提供了一種圖片呈現的方法，具體包括：

將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素；

通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致；

通過加載框判斷原圖是否加載完成；

若加載完成，則對圖片容器執(zhí)行隱藏操作，使得原圖呈現。

本發(fā)明實施例第二方面提供了一種圖片呈現裝置，具體包括：

覆蓋單元，用于將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素；

壓縮單元，用于通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致；

判斷單元，用于通過加載框判斷原圖是否加載完成；

隱藏單元，用于當判斷單元判斷原圖加載完成時，對圖片容器執(zhí)行隱藏操作，使得原圖呈現。

本發(fā)明實施例第三方面提供了一種圖片呈現裝置，具體包括：

輸入裝置、輸出裝置、處理器和存儲器；

處理器通過調用存儲器存儲的操作指令，用于執(zhí)行如下步驟：

將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素；

通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致；

通過加載框判斷原圖是否加載完成；

若加載完成，則對圖片容器執(zhí)行隱藏操作，使得原圖呈現。

從以上技術方案可以看出，本發(fā)明實施例具有以下優(yōu)點：

本發(fā)明實施例中，圖片呈現裝置將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬瀏覽器中的元素，通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致，然后通過加載框判斷原圖是否加載完成，如果加載完成，則對圖片容器執(zhí)行隱藏操作，使得原圖呈現。也就是說，用戶在等待目標圖片的原圖在加載時，在目標圖片原圖的位置會顯示與原圖對應尺寸的預覽圖，用戶在等待原圖加載的時候能看到與原圖相對應的預覽圖，使得用戶打開網頁時，提高用戶的視覺體驗。

附圖說明

圖1為本發(fā)明實施例中網絡結構示意圖；

圖2為本發(fā)明實施例中圖片呈現的方法一實施例示意圖；

圖3為本發(fā)明實施例中圖片呈現的方法另一實施例示意圖；

圖4為本發(fā)明實施例中圖片呈現的方法另一實施例示意圖；

圖5為本發(fā)明實施例中圖片呈現裝置一實施例示意圖；

圖6為本發(fā)明實施例中圖片呈現裝置另一實施例示意圖；

圖7為本發(fā)明實施例中圖片呈現裝置另一實施例示意圖。

具體實施方式

本發(fā)明實施例提供了一種圖片呈現的方法以及圖片呈現裝置，用于當用戶打開網頁時，提高用戶的視覺體驗。

為了使本技術領域的人員更好地理解本發(fā)明方案，下面將結合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明一部分的實施例，而不是全部的實施例?；诒景l(fā)明中的實施例。

本發(fā)明的說明書和權利要求書及上述附圖中的術語“第一”、“第二”、“第三”、“第四”等(如果存在)是用于區(qū)別類似的對象，而不必用于描述特定的順序或先后次序。應該理解這樣使用的數據在適當情況下可以互換，以便這里描述的實施例能夠以除了在這里圖示或描述的內容以外的順序實施。此外，術語“包括”或“具有”及其任何變形，意圖在于覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統(tǒng)、產品或設備不必限于清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或對于這些過程、方法、產品或設備固有的其它步驟或單元。

本發(fā)明實施例可應用于如圖1所示的網絡架構，該網絡架構中，用戶可通過用戶設備(例如個人計算機、筆記本電腦、平板電腦、手機等)連接到服務器上，然后通過安裝于用戶設備上的圖片呈現裝置獲取服務器上的網絡資源。

請參閱圖2，本發(fā)明實施例中圖片呈現的方法一個實施例包括：

201、將圖片容器覆蓋于加載框上方。

本實施例中，當圖片呈現裝置接收到下載指令之后，將會把圖片容器覆蓋于加載框上方，使得圖片容器遮擋住加載框，其中，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素。

202、通過圖片容器對原圖的數據進行壓縮處理。

本實施例中，當圖片呈現裝置接收到下載指令之后，將會通過圖片容器對原圖的數據進行壓縮處理，得到一張與目標圖片尺寸一致的預覽圖，其中，預覽圖呈現于圖片容器中，即，圖片容器上顯示預覽圖，在原圖加載的過程中，向用戶展現出來的是位于圖片容器中的預覽圖。

需要說明的是，預覽圖質量約為原圖質量的20％。

203、通過加載框判斷原圖是否加載完成，若加載完成，則執(zhí)行步驟204；若未加載完成，則執(zhí)行步驟205。

本實施例中，圖片呈現裝置接收到下載指令之后，該圖片呈現裝置中的加載框將根據該下載指令進行下載操作，然后通過加載框判斷原圖是否加載完成。

204、對圖片容器執(zhí)行隱藏操作。

本實施例中，當圖片呈現裝置通過加載框判斷目標圖片的原圖已經加載完成之后，將對該圖片容器執(zhí)行隱藏操作，以使得加載框中已經加載完成的原圖呈現出來。

205、通過加載框繼續(xù)加載目標圖片的原圖。

本實施例中，當圖片呈現裝置通過加載框判斷目標圖片的原圖還沒有加載完成，則該加載框繼續(xù)執(zhí)行下載操作。

本發(fā)明實施例中，圖片呈現裝置將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素，通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致，然后通過加載框判斷原圖是否加載完成，如果加載完成，則對圖片容器執(zhí)行隱藏操作，使得原圖呈現。也就是說，用戶在等待目標圖片的原圖在加載時，在目標圖片原圖的位置會顯示與原圖對應尺寸的預覽圖，用戶在等待原圖加載的時候能看到與原圖相對應的預覽圖，使得用戶打開網頁時，提高用戶的視覺體驗。

請參閱圖3，本發(fā)明實施例中圖片呈現的方法另一個實施例包括：

301、將圖片容器覆蓋于加載框上方。

本實施例中，當圖片呈現裝置接收到下載指令之后，將會把圖片容器覆蓋于加載框上方，其中，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素。其中，將圖片容器覆蓋于加載框上方之前，需要提前確定加載框在網頁中的位置信息，然后再根據該位置信息將圖片容器覆蓋于加載框上方，使得圖片容器遮擋住加載框。

302、通過圖片容器對原圖的數據進行壓縮處理。

本實施例中，當圖片呈現裝置接收到下載指令之后，將會通過圖片容器對原圖的數據進行壓縮處理，得到一張與目標圖片尺寸一致的預覽圖，其中，預覽圖呈現于圖片容器中，即，圖片容器上顯示預覽圖，在原圖加載的過程中，向用戶展現出來的是位于圖片容器中的預覽圖，其中，預覽圖與目標圖片的尺寸一致目的是為了當原圖加載完畢并呈現出來的時候，網頁不需要再重排，提高用戶的視覺體驗。

需要說明的是，預覽圖質量約為原圖質量的20％。

303、通過加載框判斷原圖是否加載完成，若加載完成，則執(zhí)行步驟304和305；若未加載完成，則執(zhí)行步驟306。

本實施例中，圖片呈現裝置接收到下載指令之后，將根據該下載指令獲取下載資源，其中該下載資源包括目標圖片的原圖的數據，圖片呈現裝置獲取到原圖的數據之后便觸發(fā)加載框對原圖進行下載操作，然后圖片呈現裝置通過加載框判斷原圖是否加載完成。

304、接收用戶的隱藏指令。

本實施例中，當圖片呈現裝置通過加載框判斷目標圖片的原圖已經加載完成之后，為了隱藏圖片容器，使得原圖呈現出來，需要接收用戶的隱藏指令，具體做法可以是，用戶通過鼠標點擊網頁上的圖片容器。

305、根據隱藏指令對圖片容器執(zhí)行隱藏操作。

本實施例中，當圖片呈現裝置接收到來自用戶的隱藏指令之后，將會根據該隱藏指令對該圖片容器進行隱藏操作，使得原圖可以呈現出來。

306、通過加載框繼續(xù)加載目標圖片的原圖。

本實施例中，當圖片呈現裝置通過加載框判斷目標圖片的原圖還沒有加載完成，則該加載框繼續(xù)執(zhí)行下載操作。

本發(fā)明實施例中，圖片呈現裝置將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素，通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致，然后通過加載框判斷原圖是否加載完成，如果加載完成，則對圖片容器執(zhí)行隱藏操作，使得原圖呈現。也就是說，用戶在等待目標圖片的原圖在加載時，在目標圖片原圖的位置會顯示與原圖對應尺寸的預覽圖，用戶在等待原圖加載的時候能看到與原圖相對應的預覽圖，使得用戶打開網頁時，提高用戶的視覺體驗。

請參閱圖4，本發(fā)明實施例中圖片呈現的方法另一個實施例包括：

401、將圖片容器覆蓋于加載框上方。

本實施例中，當圖片呈現裝置接收到下載指令之后，將會把圖片容器覆蓋于加載框上方，其中，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素。其中，將圖片容器覆蓋于加載框上方之前，需要提前確定加載框在網頁中的位置信息，然后再根據該位置信息將圖片容器覆蓋于加載框上方，使得圖片容器遮擋住加載框。

402、通過圖片容器對原圖的數據進行壓縮處理。

本實施例中，當圖片呈現裝置接收到下載指令之后，將會通過圖片容器對原圖的數據進行壓縮處理，得到一張與目標圖片尺寸一致的預覽圖，其中，預覽圖呈現于圖片容器中，即，圖片容器上顯示預覽圖，在原圖加載的過程中，向用戶展現出來的是位于圖片容器中的預覽圖，其中，預覽圖與目標圖片的尺寸一致目的是為了當原圖加載完畢并呈現出來的時候，網頁不需要再重排，提高用戶的視覺體驗。

需要說明的是，預覽圖質量約為原圖質量的20％。

403、通過加載框判斷原圖是否加載完成，若加載完成，則執(zhí)行步驟404和405；若未加載完成，則執(zhí)行步驟406。

本實施例中，圖片呈現裝置接收到下載指令之后，將根據該下載指令獲取下載資源，其中該下載資源包括目標圖片的原圖的數據，圖片呈現裝置獲取到原圖的數據之后便觸發(fā)加載框對原圖進行下載操作，然后圖片呈現裝置通過加載框判斷原圖是否加載完成。

404、接收加載完成指令。

本實施例中，當圖片呈現裝置通過加載框判斷目標圖片的原圖已經加載完成之后，將會接收加載完成指令，其中，加載完成指令根據加載框判斷原圖加載完成時生成。

405、將加載完成指令反饋至圖片容器，圖片容器根據加載完成指令對圖片容器執(zhí)行隱藏操作。

本實施例中，當圖片呈現裝置將加載完成指令反饋至圖片容器之后，圖片容器將根據加載完成指令對圖片容器執(zhí)行隱藏操作，使得原圖可以呈現出來。本實施例中，隱藏操作不需要用戶參與，當加載框中的原圖加載完畢之后，加載框自動隱藏。

406、通過加載框繼續(xù)加載目標圖片的原圖。

本實施例中，當圖片呈現裝置通過加載框判斷目標圖片的原圖還沒有加載完成，則該加載框繼續(xù)執(zhí)行下載操作。

本發(fā)明實施例中，圖片呈現裝置將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素，通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致，然后通過加載框判斷原圖是否加載完成，如果加載完成，則對圖片容器執(zhí)行隱藏操作，使得原圖呈現。也就是說，用戶在等待目標圖片的原圖在加載時，在目標圖片原圖的位置會顯示與原圖對應尺寸的預覽圖，用戶在等待原圖加載的時候能看到與原圖相對應的預覽圖，使得用戶打開網頁時，提高用戶的視覺體驗。

上面對本發(fā)明實施例中的圖片呈現的方法進行了描述，下面對本發(fā)明實施例中的圖片呈現裝置進行描述，請參閱圖5，本發(fā)明實施例中的圖片呈現裝置包括：

覆蓋單元501，用于將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于圖片呈現裝置中的元素；

壓縮單元502，用于通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致；

判斷單元503，用于通過加載框判斷原圖是否加載完成；

隱藏單元504，用于當判斷單元判斷原圖加載完成時，對圖片容器執(zhí)行隱藏操作，使得原圖呈現。

本發(fā)明實施例中，覆蓋單元501將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素，壓縮單元502通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致，然后判斷單元503通過加載框判斷原圖是否加載完成，如果加載完成，則隱藏單元504對圖片容器執(zhí)行隱藏操作，使得原圖呈現。也就是說，用戶在等待目標圖片的原圖在加載時，在目標圖片原圖的位置會顯示與原圖對應尺寸的預覽圖，用戶在等待原圖加載的時候能看到與原圖相對應的預覽圖，使得用戶打開網頁時，提高用戶的視覺體驗。

請參閱圖6，本發(fā)明實施例中圖片呈現裝置的另一個實施例包括：

覆蓋單元601，用于將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素；

其中，覆蓋單元601包括：

確定子單元6011，用于確定加載框在網頁中的位置信息；

覆蓋子單元6012，用于根據確定子單元確定的位置信息將圖片容器覆蓋于加載框上方。

接收單元602，用于接收原圖的數據。

壓縮單元603，用于通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致；

判斷單元604，用于通過加載框判斷原圖是否加載完成；

隱藏單元605，用于當判斷單元判斷原圖加載完成時，對圖片容器執(zhí)行隱藏操作，使得原圖呈現。

其中，隱藏單元605包括：

第一接收子單元6051，用于接收用戶的隱藏指令；

隱藏子單元6052，用于根據第一接收子單元接收到的隱藏指令對圖片容器執(zhí)行隱藏操作。

或，

第二接收子單元6053，用于接收加載完成指令，加載完成指令根據加載框判斷原圖加載完成時生成；

反饋子單元6054，用于將第二接收子單元接收到的加載完成指令反饋至圖片容器，圖片容器根據加載完成指令對圖片容器執(zhí)行隱藏操作。

本發(fā)明實施例中，覆蓋單元601將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素，接收單元602接收原圖的數據，壓縮單元603通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致，然后判斷單元604通過加載框判斷原圖是否加載完成，如果加載完成，則隱藏單元605對圖片容器執(zhí)行隱藏操作，使得原圖呈現。也就是說，用戶在等待目標圖片的原圖在加載時，在目標圖片原圖的位置會顯示與原圖對應尺寸的預覽圖，用戶在等待原圖加載的時候能看到與原圖相對應的預覽圖，使得用戶打開網頁時，提高用戶的視覺體驗。

請參閱圖7，圖7是本發(fā)明實施例提供的一種圖片呈現裝置結構示意圖，該圖片呈現裝置700可因配置或性能不同而產生比較大的差異，可以包括一個或一個以上中央處理器(central processing units，CPU)722(例如，一個或一個以上處理器)和存儲器732，一個或一個以上存儲應用程序742或數據744的存儲介質730(例如一個或一個以上海量存儲設備)。其中，存儲器732和存儲介質730可以是短暫存儲或持久存儲。存儲在存儲介質730的程序可以包括一個或一個以上模塊(圖示沒標出)，每個模塊可以包括對圖片呈現裝置中的一系列指令操作。更進一步地，中央處理器722可以設置為與存儲介質730通信，打開器700上執(zhí)行存儲介質730中的一系列指令操作。

圖片呈現裝置700還可以包括一個或一個以上電源726，一個或一個以上有線或無線網絡接口750，一個或一個以上輸入輸出接口758，和/或，一個或一個以上操作系統(tǒng)741，例如Windows ServerTM，Mac OS XTM，UnixTM，LinuxTM，FreeBSDTM等等。

上述實施例中由圖片呈現裝置所執(zhí)行的步驟可以基于該圖7所示的圖片呈現裝置結構。

所屬領域的技術人員可以清楚地了解到，為描述的方便和簡潔，上述描述的系統(tǒng)，裝置和單元的具體工作過程，可以參考前述方法實施例中的對應過程，在此不再贅述。

在本申請所提供的幾個實施例中，應該理解到，所揭露的系統(tǒng)，裝置和方法，可以通過其它的方式實現。例如，以上所描述的裝置實施例僅僅是示意性的，例如，所述單元的劃分，僅僅為一種邏輯功能劃分，實際實現時可以有另外的劃分方式，例如多個單元或組件可以結合或者可以集成到另一個系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，裝置或單元的間接耦合或通信連接，可以是電性，機械或其它的形式。

所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個地方，或者也可以分布到多個網絡單元上?？梢愿鶕嶋H的需要選擇其中的部分或者全部單元來實現本實施例方案的目的。

另外，在本發(fā)明各個實施例中的各功能單元可以集成在一個處理單元中，也可以是各個單元單獨物理存在，也可以兩個或兩個以上單元集成在一個單元中。上述集成的單元既可以采用硬件的形式實現，也可以采用軟件功能單元的形式實現。

所述集成的單元如果以軟件功能單元的形式實現并作為獨立的產品銷售或使用時，可以存儲在一個計算機可讀取存儲介質中?；谶@樣的理解，本發(fā)明的技術方案本質上或者說對現有技術做出貢獻的部分或者該技術方案的全部或部分可以以軟件產品的形式體現出來，該計算機軟件產品存儲在一個存儲介質中，包括若干指令用以使得一臺計算機設備(可以是個人計算機，服務器，或者網絡設備等)執(zhí)行本發(fā)明各個實施例所述方法的全部或部分步驟。而前述的存儲介質包括：U盤、移動硬盤、只讀存儲器(ROM，Read-Only Memory)、隨機存取存儲器(RAM，Random Access Memory)、磁碟或者光盤等各種可以存儲程序代碼的介質。

以上所述，以上實施例僅用以說明本發(fā)明的技術方案，而非對其限制；盡管參照前述實施例對本發(fā)明進行了詳細的說明，本領域的普通技術人員應當理解：其依然可以對前述各實施例所記載的技術方案進行修改，或者對其中部分技術特征進行等同替換；而這些修改或者替換，并不使相應技術方案的本質脫離本發(fā)明各實施例技術方案的精神和范圍。