[發明專利]一種圖片顯示方法及裝置

在審

• 申請號: 201710852175.9
• 申請日: 2017-09-19
• 公開（公告）號: CN107633057A
• 公開（公告）日: 2018-01-26
• 發明（設計）人: 徐佳宏;朱呂亮
• 申請（專利權）人: 深圳市茁壯網絡股份有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 深圳市深佳知識產權代理事務所(普通合伙)44285
• 代理人: 王仲凱

技術領域

本申請涉及計算機技術領域，特別涉及一種圖片顯示方法及裝置。

背景技術

隨著互聯網的發展和用戶越來越多的需求，通過網絡呈現的頁面(如瀏覽器頁面、app頁面)越來越豐富，通常為了達到頁面豐富的目的，同一個頁面中需要很多小圖片。

雖然，同一個頁面中包括很多小圖片可以使頁面豐富，但是每一張小圖片均需要向服務器請求一次資源，服務器需要響應多次請求且每次響應請求返回的內容一般包括頭部和正文，而對于小圖片而言，頭部的數據量往往較多，正文部分的數據量較少，導致服務器需要返回很多無用數據，浪費網絡帶寬和服務器資源。

發明內容

為解決上述技術問題，本申請實施例提供一種圖片顯示方法及裝置，以達到節省網絡帶寬和服務器資源的目的，技術方案如下：

一種圖片顯示方法，包括：

將頁面中所需的小圖片合并為大圖片，各個所述小圖片的IMG元素的src屬性指向所述大圖片，各個所述小圖片的IMG元素的擴展屬性用于描述所述小圖片在所述大圖片中的位置；

向服務器發送一次資源請求，獲取所述大圖片的資源；

按照各個所述小圖片的IMG元素的src屬性和擴展屬性，從所述大圖片的資源中獲取各個所述小圖片的資源，并分別顯示。

優選的，各個所述小圖片的IMG元素的擴展屬性包括：imgx屬性、imgy屬性、imgw屬性和imgh屬性；

所述imgx屬性用于描述小圖片左上角相對于大圖片左上角的水平偏移，以向右為正方向；

所述imgy屬性用于描述小圖片左上角相對于大圖片左上角的豎直偏移，以向下為正方向；

所述imgw屬性用于描述小圖片本身的寬度；

所述imgh屬性用于描述小圖片本身的高度。

優選的，按照各個所述小圖片的IMG元素的src屬性和擴展屬性，從所述大圖片的資源中獲取各個所述小圖片的資源，包括：

對所述大圖片的資源進行解碼，得到大圖片解碼數據；

按照各個所述小圖片的IMG元素的擴展屬性中的imgw指定的寬度和imgh屬性指定的高度，為各個所述小圖片分配內存；

按照各個所述小圖片的IMG元素的擴展屬性中的imgx指定的水平偏移和imgy指定的豎直偏移，從所述大圖片解碼數據中獲取對應的數據，并將獲取的數據拷貝到為各個所述小圖片分配的內存中。

一種圖片顯示裝置，包括：

合并模塊，用于將頁面中所需的小圖片合并為大圖片，各個所述小圖片的IMG元素的src屬性指向所述大圖片，各個所述小圖片的IMG元素的擴展屬性用于描述所述小圖片在所述大圖片中的位置；

資源請求模塊，用于向服務器發送一次資源請求，獲取所述大圖片的資源；

顯示模塊，用于按照各個所述小圖片的IMG元素的src屬性和擴展屬性，從所述大圖片的資源中獲取各個所述小圖片的資源，并分別顯示。

優選的，各個所述小圖片的IMG元素的擴展屬性包括：imgx屬性、imgy屬性、imgw屬性和imgh屬性；

所述imgx屬性用于描述小圖片左上角相對于大圖片左上角的水平偏移，以向右為正方向；

所述imgy屬性用于描述小圖片左上角相對于大圖片左上角的豎直偏移，以向下為正方向；

所述imgw屬性用于描述小圖片本身的寬度；

所述imgh屬性用于描述小圖片本身的高度。

優選的，所述顯示模塊包括：

解碼單元，用于對所述大圖片的資源進行解碼，得到大圖片解碼數據；

內存分配單元，用于按照各個所述小圖片的IMG元素的擴展屬性中的imgw指定的寬度和imgh屬性指定的高度，為各個所述小圖片分配內存；

拷貝單元，用于按照各個所述小圖片的IMG元素的擴展屬性中的imgx指定的水平偏移和imgy指定的豎直偏移，從所述大圖片解碼數據中獲取對應的數據，并將獲取的數據拷貝到為各個所述小圖片分配的內存中。

與現有技術相比，本申請的有益效果為：

在本申請中，將頁面中所需的小圖片合并為大圖片，并向服務器發送一次資源請求，服務器只需響應一次資源請求，將大圖片的資源返回至頁面，由頁面獲取大圖片的資源，避免了服務器響應多次資源請求，進而避免服務器返回過多的無用數據，節省了網絡帶寬和服務器資源。

附圖說明