一種圖片呈現的方法以及圖片呈現裝置制造方法及圖紙

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

Picture presentation method and picture presentation device

The embodiment of the invention discloses a picture presentation method and a picture presentation device for improving the user's visual experience when a user opens a web page. The embodiment of the invention comprises: loading containers covered on the picture above the frame, the loading box for loading the original target picture, picture frame and container loading is a browser element in the container through the picture of the original image data compression, target image preview, preview picture appears on the container, and preview the size is consistent with the original image, and then determine whether the original frame by loading is loaded, if the completion of the loading of containers, picture is hidden, making the original presentation. That is to say, in the original picture of the target user waiting at load time, in the original position of the target image will be displayed with the original size corresponding to the preview, the user can see the corresponding image preview when waiting for the original loading, allows the user to open a web page, to improve the user's visual experience.

【技術實現步驟摘要】
一種圖片呈現的方法以及圖片呈現裝置
本專利技術涉及網頁前端設計領域，具體涉及一種圖片呈現的方法以及圖片呈現裝置。
技術介紹
隨著計算機技術以及瀏覽器技術的快速發展，萬維網Web前端應用發展得越發復雜與龐大。圖片資源作為應用評價指標之一，與用戶的交互越來越密切。當瀏覽器頻繁載入大量高質量圖片資源時，用戶不得不被動的面對停滯的瀏覽器頁面以等待資源加載完畢。當網絡受到影響甚至中斷的時候，會導致最終圖片資源渲染失敗或者頁面呈現不完整等結果。這些都會使得用戶受到不同程度的負面體驗。在現有技術中，通過加載等待動畫過場特效使得用戶的注意力得以轉移，雖然該方法或可間接延長用戶耐心度，但是當諸多圖片同時加載的時候，會影響頁面整體觀賞性和一致性，并且始終單一的動畫無法從根本上挽救用戶體驗，導致用戶打開網頁時，視覺體驗低。
技術實現思路
本專利技術實施例提供了一種圖片呈現的方法以及圖片呈現裝置，用于當用戶打開網頁時，提高用戶的視覺體驗。本專利技術實施例第一方面提供了一種圖片呈現的方法，具體包括：將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素；通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致；通過加載框判斷原圖是否加載完成；若加載完成，則對圖片容器執行隱藏操作，使得原圖呈現。本專利技術實施例第二方面提供了一種圖片呈現裝置，具體包括：覆蓋單元，用于將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素；壓縮單元，用于通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致；判斷單元，用于通過加載框判斷原圖是否加載完成；隱藏單元，用于當判斷單元判斷原圖加載完成時，對圖片容器執行隱藏操作，使得原圖呈現。本專利技術實施例第三方面提供了一種圖片呈現裝置，具體包括：輸入裝置、輸出裝置、處理器和存儲器；處理器通過調用存儲器存儲的操作指令，用于執行如下步驟：將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素；通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致；通過加載框判斷原圖是否加載完成；若加載完成，則對圖片容器執行隱藏操作，使得原圖呈現。從以上技術方案可以看出，本專利技術實施例具有以下優點：本專利技術實施例中，圖片呈現裝置將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬瀏覽器中的元素，通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致，然后通過加載框判斷原圖是否加載完成，如果加載完成，則對圖片容器執行隱藏操作，使得原圖呈現。也就是說，用戶在等待目標圖片的原圖在加載時，在目標圖片原圖的位置會顯示與原圖對應尺寸的預覽圖，用戶在等待原圖加載的時候能看到與原圖相對應的預覽圖，使得用戶打開網頁時，提高用戶的視覺體驗。附圖說明圖1為本專利技術實施例中網絡結構示意圖；圖2為本專利技術實施例中圖片呈現的方法一實施例示意圖；圖3為本專利技術實施例中圖片呈現的方法另一實施例示意圖；圖4為本專利技術實施例中圖片呈現的方法另一實施例示意圖；圖5為本專利技術實施例中圖片呈現裝置一實施例示意圖；圖6為本專利技術實施例中圖片呈現裝置另一實施例示意圖；圖7為本專利技術實施例中圖片呈現裝置另一實施例示意圖。具體實施方式本專利技術實施例提供了一種圖片呈現的方法以及圖片呈現裝置，用于當用戶打開網頁時，提高用戶的視覺體驗。為了使本
的人員更好地理解本專利技術方案，下面將結合本專利技術實施例中的附圖，對本專利技術實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本專利技術一部分的實施例，而不是全部的實施例。基于本專利技術中的實施例。本專利技術的說明書和權利要求書及上述附圖中的術語“第一”、“第二”、“第三”、“第四”等(如果存在)是用于區別類似的對象，而不必用于描述特定的順序或先后次序。應該理解這樣使用的數據在適當情況下可以互換，以便這里描述的實施例能夠以除了在這里圖示或描述的內容以外的順序實施。此外，術語“包括”或“具有”及其任何變形，意圖在于覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統、產品或設備不必限于清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或對于這些過程、方法、產品或設備固有的其它步驟或單元。本專利技術實施例可應用于如圖1所示的網絡架構，該網絡架構中，用戶可通過用戶設備(例如個人計算機、筆記本電腦、平板電腦、手機等)連接到服務器上，然后通過安裝于用戶設備上的圖片呈現裝置獲取服務器上的網絡資源。請參閱圖2，本專利技術實施例中圖片呈現的方法一個實施例包括：201、將圖片容器覆蓋于加載框上方。本實施例中，當圖片呈現裝置接收到下載指令之后，將會把圖片容器覆蓋于加載框上方，使得圖片容器遮擋住加載框，其中，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素。202、通過圖片容器對原圖的數據進行壓縮處理。本實施例中，當圖片呈現裝置接收到下載指令之后，將會通過圖片容器對原圖的數據進行壓縮處理，得到一張與目標圖片尺寸一致的預覽圖，其中，預覽圖呈現于圖片容器中，即，圖片容器上顯示預覽圖，在原圖加載的過程中，向用戶展現出來的是位于圖片容器中的預覽圖。需要說明的是，預覽圖質量約為原圖質量的20％。203、通過加載框判斷原圖是否加載完成，若加載完成，則執行步驟204；若未加載完成，則執行步驟205。本實施例中，圖片呈現裝置接收到下載指令之后，該圖片呈現裝置中的加載框將根據該下載指令進行下載操作，然后通過加載框判斷原圖是否加載完成。204、對圖片容器執行隱藏操作。本實施例中，當圖片呈現裝置通過加載框判斷目標圖片的原圖已經加載完成之后，將對該圖片容器執行隱藏操作，以使得加載框中已經加載完成的原圖呈現出來。205、通過加載框繼續加載目標圖片的原圖。本實施例中，當圖片呈現裝置通過加載框判斷目標圖片的原圖還沒有加載完成，則該加載框繼續執行下載操作。本專利技術實施例中，圖片呈現裝置將圖片容器覆蓋于加載框上方，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素，通過圖片容器對原圖的數據進行壓縮處理，得到目標圖片的預覽圖，預覽圖呈現于圖片容器中，且預覽圖的尺寸與原圖一致，然后通過加載框判斷原圖是否加載完成，如果加載完成，則對圖片容器執行隱藏操作，使得原圖呈現。也就是說，用戶在等待目標圖片的原圖在加載時，在目標圖片原圖的位置會顯示與原圖對應尺寸的預覽圖，用戶在等待原圖加載的時候能看到與原圖相對應的預覽圖，使得用戶打開網頁時，提高用戶的視覺體驗。請參閱圖3，本專利技術實施例中圖片呈現的方法另一個實施例包括：301、將圖片容器覆蓋于加載框上方。本實施例中，當圖片呈現裝置接收到下載指令之后，將會把圖片容器覆蓋于加載框上方，其中，加載框用于加載目標圖片的原圖，圖片容器與加載框屬于瀏覽器中的元素。其中，將圖片容器覆蓋于加載框上方之前，需要提前確定加載框在網頁中的位置信息，然后再根據該位置信息將圖片容器覆蓋于加載框上方，使得圖片容器遮擋住加載框。302、通本文檔來自技高網...

【技術保護點】
一種圖片呈現的方法，其特征在于，包括：將圖片容器覆蓋于加載框上方，所述加載框用于加載目標圖片的原圖，所述圖片容器與所述加載框屬于瀏覽器中的元素；通過所述圖片容器對所述原圖的數據進行壓縮處理，得到所述目標圖片的預覽圖，所述預覽圖呈現于所述圖片容器中，且所述預覽圖的尺寸與所述原圖一致；通過所述加載框判斷所述原圖是否加載完成；若加載完成，則對所述圖片容器執行隱藏操作，使得所述原圖呈現。

【技術特征摘要】
1.一種圖片呈現的方法，其特征在于，包括：將圖片容器覆蓋于加載框上方，所述加載框用于加載目標圖片的原圖，所述圖片容器與所述加載框屬于瀏覽器中的元素；通過所述圖片容器對所述原圖的數據進行壓縮處理，得到所述目標圖片的預覽圖，所述預覽圖呈現于所述圖片容器中，且所述預覽圖的尺寸與所述原圖一致；通過所述加載框判斷所述原圖是否加載完成；若加載完成，則對所述圖片容器執行隱藏操作，使得所述原圖呈現。2.根據權利要求1所述的方法，其特征在于，所述對所述圖片容器執行隱藏操作包括：接收用戶的隱藏指令；根據所述隱藏指令對所述圖片容器執行隱藏操作。3.根據權利要求1所述的方法，其特征在于，所述對所述圖片容器執行隱藏操作包括：接收加載完成指令，所述加載完成指令根據所述加載框判斷所述原圖加載完成時生成；將所述加載完成指令反饋至所述圖片容器，所述圖片容器根據所述加載完成指令對所述圖片容器執行隱藏操作。4.根據權利要求1至3中任一項所述的方法，其特征在于，所述通過所述圖片容器對所述原圖的數據進行壓縮處理之前，所述方法還包括：接收所述原圖的數據。5.根據權利要求1至3中任一項所述的方法，其特征在于，所述將圖片容器覆蓋于加載框上方包括：確定所述加載框在網頁中的位置信息；根據所述位置信息將所述圖片容器覆蓋于所述加載框上方。6.一種圖片呈現裝置，其特征在于，包括：覆蓋單元，用于將圖片容器覆蓋于加載框上方，所述加載框用于加載目標圖片的...

【專利技術屬性】
技術研發人員：唐臻，顏秉珩，王理想，
申請(專利權)人：鄭州云海信息技術有限公司，
類型：發明
國別省市：河南,41