[發明專利]一種圖片呈現的方法以及圖片呈現裝置

在審

• 申請號: 201710091324.4
• 申請日: 2017-02-20
• 公開（公告）號: CN106874485A
• 公開（公告）日: 2017-06-20
• 發明（設計）人: 唐臻;顏秉珩;王理想
• 申請（專利權）人: 鄭州云海信息技術有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 北京集佳知識產權代理有限公司11227
• 代理人: 王寶筠

技術領域

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

背景技術

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

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

發明內容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

從以上技術方案可以看出，本發明實施例具有以下優點：

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

附圖說明

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

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

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

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

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

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

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

具體實施方式

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

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