本申請(qǐng)涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，尤其涉及一種圖片的加載方法和裝置。

背景技術(shù)：

為了能夠?yàn)橛脩籼峁└玫囊曈X體驗(yàn)，目前的網(wǎng)站頁面中會(huì)存在大量圖片以供用戶查看。而網(wǎng)站頁面中還可能會(huì)存在尺寸過大的圖片，此時(shí)可簡單地通過CSS(級(jí)聯(lián)樣式表)樣式的設(shè)置來實(shí)現(xiàn)在小屏幕設(shè)備上(如小屏幕的手機(jī)等)也能正常顯示，但是，此時(shí)頁面中的實(shí)際圖片還是用的大尺寸設(shè)備時(shí)使用的圖片，這樣會(huì)存在浪費(fèi)資源的情況。

雖然，目前可通過HTML5(超文本標(biāo)記語言)中的標(biāo)簽picture來實(shí)現(xiàn)將大尺寸圖片的大小調(diào)整為適合于小屏幕設(shè)備的大小，但是仍存在以下缺點(diǎn)：(1)存在兼容性問題，絕大數(shù)主流瀏覽器還不支持HTML5中的標(biāo)簽picture這一特性；(2)需要以嵌入多個(gè)子HTML標(biāo)簽的方式來定義，使用起來不夠方便；(3)在網(wǎng)速不佳的情況下，當(dāng)遇到圖片加載失敗的情況，且加載失敗的圖片的相應(yīng)位置出現(xiàn)空白或帶叉的占位符號(hào)時(shí)，不能再次嘗試加載，影響用戶體驗(yàn)。

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

本申請(qǐng)的目的旨在至少在一定程度上解決上述的技術(shù)問題之一。

為此，本申請(qǐng)的第一個(gè)目的在于提出一種圖片的加載方法。該方法基于Javascript來實(shí)現(xiàn)，其兼容主流瀏覽器，根據(jù)在圖片標(biāo)簽(如img標(biāo)簽)上自定義的加載規(guī)則，和當(dāng)前客戶端屏幕的高度做比對(duì)，從而選擇最優(yōu)尺寸的圖片加載，節(jié)省了帶寬資源和流量，并提高了頁面的展示速度，并且通過設(shè)置失敗重試功能來實(shí)現(xiàn)圖片盡可能地加載成功的目的。

本申請(qǐng)的第二個(gè)目的在于提出一種圖片的加載裝置。

為達(dá)到上述目的，本申請(qǐng)第一方面實(shí)施例的圖片的加載方法，包括：獲取圖片標(biāo)簽，并獲取客戶端的尺寸信息；根據(jù)所述客戶端的尺寸信息從所述圖片標(biāo)簽中獲取對(duì)應(yīng)的地址信息；以及根據(jù)所述地址信息加載對(duì)應(yīng)的圖片。

本申請(qǐng)實(shí)施例的圖片的加載方法，可先獲取圖片標(biāo)簽，并獲取客戶端的尺寸信息，之后，根據(jù)客戶端的尺寸信息從圖片標(biāo)簽中獲取對(duì)應(yīng)的地址信息，并根據(jù)地址信息加載對(duì)應(yīng)的圖片，即基于Javascript來實(shí)現(xiàn)，其兼容主流瀏覽器，根據(jù)在圖片標(biāo)簽(如img標(biāo)簽) 上自定義的加載規(guī)則，和當(dāng)前客戶端屏幕的高度做比對(duì)，從而選擇最優(yōu)尺寸的圖片加載，節(jié)省了帶寬資源和流量，并提高了頁面的展示速度，并且通過設(shè)置失敗重試功能來實(shí)現(xiàn)圖片盡可能地加載成功的目的。

為達(dá)到上述目的，本申請(qǐng)第二方面實(shí)施例的圖片的加載裝置，包括：第一獲取模塊，用于獲取圖片標(biāo)簽，并獲取客戶端的尺寸信息；第二獲取模塊，用于根據(jù)所述客戶端的尺寸信息從所述圖片標(biāo)簽中獲取對(duì)應(yīng)的地址信息；以及加載模塊，用于根據(jù)所述地址信息加載對(duì)應(yīng)的圖片。

本申請(qǐng)實(shí)施例的圖片的加載裝置，可通過第一獲取模塊獲取圖片標(biāo)簽，并獲取客戶端的尺寸信息，第二獲取模塊根據(jù)客戶端的尺寸信息從圖片標(biāo)簽中獲取對(duì)應(yīng)的地址信息，加載模塊根據(jù)地址信息加載對(duì)應(yīng)的圖片，即基于Javascript來實(shí)現(xiàn)，其兼容主流瀏覽器，根據(jù)在圖片標(biāo)簽(如img標(biāo)簽)上自定義的加載規(guī)則，和當(dāng)前客戶端屏幕的高度做比對(duì)，從而選擇最優(yōu)尺寸的圖片加載，節(jié)省了帶寬資源和流量，并提高了頁面的展示速度，并且通過設(shè)置失敗重試功能來實(shí)現(xiàn)圖片盡可能地加載成功的目的。

本申請(qǐng)附加的方面和優(yōu)點(diǎn)將在下面的描述中部分給出，部分將從下面的描述中變得明顯，或通過本申請(qǐng)的實(shí)踐了解到。

附圖說明

本申請(qǐng)上述的和/或附加的方面和優(yōu)點(diǎn)從下面結(jié)合附圖對(duì)實(shí)施例的描述中將變得明顯和容易理解，其中，

圖1是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的圖片的加載方法的流程圖；

圖2是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的圖片的加載方法的示例圖；

圖3是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的圖片的加載裝置的結(jié)構(gòu)示意圖；

圖4是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的第二獲取模塊的結(jié)構(gòu)示意圖；以及

圖5是根據(jù)本申請(qǐng)另一個(gè)實(shí)施例的圖片的加載裝置的結(jié)構(gòu)示意圖。

具體實(shí)施方式

下面詳細(xì)描述本申請(qǐng)的實(shí)施例，所述實(shí)施例的示例在附圖中示出，其中自始至終相同或類似的標(biāo)號(hào)表示相同或類似的元件或具有相同或類似功能的元件。下面通過參考附圖描述的實(shí)施例是示例性的，旨在用于解釋本申請(qǐng)，而不能理解為對(duì)本申請(qǐng)的限制。

下面參考附圖描述根據(jù)本申請(qǐng)實(shí)施例的圖片的加載方法和裝置。

圖1是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的圖片的加載方法的流程圖。如圖1所示，該圖片的加載方法可以包括：

S101，獲取圖片標(biāo)簽，并獲取客戶端的尺寸信息。

具體地，當(dāng)接收到用戶發(fā)送針對(duì)某個(gè)網(wǎng)站頁面的瀏覽請(qǐng)求時(shí)，可根據(jù)用戶的瀏覽請(qǐng)求提供相應(yīng)的網(wǎng)頁信息，在為用戶提供網(wǎng)頁信息的過程中，可從該網(wǎng)頁信息中讀取該頁面對(duì)應(yīng)的源碼，從源碼中通過查找代表圖片標(biāo)簽的代碼(如<img>等)來獲取該頁面中所含有的圖片標(biāo)簽，并且在讀取網(wǎng)頁頁面對(duì)應(yīng)的源碼的同時(shí)，獲取該用戶對(duì)應(yīng)的客戶端的尺寸信息。其中，在本申請(qǐng)的實(shí)施例中，客戶端的尺寸信息(如客戶端的屏幕高度)可由客戶端直接通過安裝在客戶端中的jquery工具獲取，可以理解，客戶端的尺寸信息也可由客戶端根據(jù)服務(wù)器發(fā)送的獲取指令后通過jquery工具獲取的，還可由服務(wù)器直接通過安裝在服務(wù)器中的jquery工具獲取。此外，還可以通過其他工具獲取客戶端的尺寸信息，如JS工具，本申請(qǐng)實(shí)施例對(duì)于獲取客戶端的尺寸信息的具體方式不做具體限定。此外，在本申請(qǐng)的實(shí)施例中，尺寸信息可包括但不限于客戶端的屏幕尺寸大小(如客戶端的屏幕高度等)。在本申請(qǐng)的實(shí)施例中，客戶端可以是手機(jī)、平板電腦、PC機(jī)(Personal Computer，個(gè)人計(jì)算機(jī))、個(gè)人數(shù)字助理等具有各種操作系統(tǒng)的硬件設(shè)備。

S102，根據(jù)客戶端的尺寸信息從圖片標(biāo)簽中獲取對(duì)應(yīng)的地址信息。

其中，在本申請(qǐng)的一個(gè)實(shí)施例中，圖片標(biāo)簽可包括但不限于多個(gè)預(yù)設(shè)尺寸信息及多個(gè)預(yù)設(shè)尺寸信息對(duì)應(yīng)的地址信息。需要說明的是，在本申請(qǐng)的實(shí)施例中，圖片標(biāo)簽中可具有自定義的圖片加載規(guī)則。舉例而言，可在圖片標(biāo)簽中添加一個(gè)自定義屬性lazyimg來定義圖片加載規(guī)則，每個(gè)圖片標(biāo)簽可以添加多個(gè)規(guī)則，每個(gè)規(guī)則之間可通過分隔符“|”隔開。每個(gè)規(guī)則參數(shù)之間通過符號(hào)“，”分隔，如圖片標(biāo)簽的形式可如下：<img src＝”default.jpg”lazyimg＝”height,url|height2,url|height3,url|…|default_url”/>，其中，規(guī)則數(shù)據(jù)定義說明如下：height：客戶端的屏幕高度；url：待加載圖片的地址信息url(Uniform Resoure Locator，統(tǒng)一資源定位符)；default_url：默認(rèn)圖片的地址信息url。例如，假設(shè)獲取到某個(gè)頁面中的圖片標(biāo)簽為“<img src＝”AA.jpg”lazyimg＝”800,url1|600,url2|900,url3|default_url”/>”，可以看出，該圖片標(biāo)簽中具有一個(gè)自定義屬性lazyimg，該屬性中具有“800,url1”、“600,url2”、“900,url3”和“default_url”這四種規(guī)則，其中，“800”、“600”、“900”分別是預(yù)設(shè)尺寸，“url1”、“url2”、“url3”分別是預(yù)設(shè)尺寸所對(duì)應(yīng)的地址信息，此外地址信息中還含有一個(gè)默認(rèn)地址信息“default_url”。

在本申請(qǐng)的實(shí)施例中，根據(jù)客戶端的尺寸信息從圖片標(biāo)簽中獲取對(duì)應(yīng)的地址信息的具體實(shí)現(xiàn)過程可如下：可先將客戶端的尺寸信息與圖片標(biāo)簽中預(yù)設(shè)尺寸信息進(jìn)行比對(duì)，如果客戶端的尺寸信息與圖片標(biāo)簽中的一個(gè)預(yù)設(shè)尺寸信息匹配，則提取匹配的預(yù)設(shè)尺寸信息所對(duì)應(yīng)的地址信息；如果客戶端的尺寸信息與圖片標(biāo)簽中的預(yù)設(shè)尺寸信息均不匹配，則提取 默認(rèn)的圖片所對(duì)應(yīng)的地址信息。其中，在本申請(qǐng)的實(shí)施例中，當(dāng)客戶端的尺寸信息與預(yù)設(shè)尺寸信息之間的差值在預(yù)設(shè)范圍之內(nèi)時(shí)，可判斷客戶端的尺寸信息與預(yù)設(shè)尺寸信息匹配。也就是說，如果存在比客戶端的尺寸信息大、且最接近客戶端的尺寸信息的預(yù)設(shè)尺寸信息，則可判斷該預(yù)設(shè)尺寸信息與客戶端的尺寸信息匹配。

更具體地，可先從圖片標(biāo)簽中解析出自定義的圖片加載規(guī)則，之后，可根據(jù)獲取到的客戶端的尺寸信息(如屏幕高度)和自定義的圖片加載規(guī)則中定義的height(即上述的預(yù)設(shè)尺寸信息)進(jìn)行大小比對(duì)，以找到與客戶端的尺寸具有相同尺寸的那個(gè)規(guī)則，或者找到比客戶端的尺寸信息大、且最接近客戶端的尺寸的那個(gè)規(guī)則，并獲取該規(guī)則對(duì)應(yīng)的地址信息。例如，假設(shè)獲取到的圖片標(biāo)簽為：<img src＝”AA.jpg”lazyimg＝”800,url1|600,url2|900,url3|default_url”/>，如果獲取到的客戶的屏幕高度為800，則可將該屏幕高度“800”與圖片標(biāo)簽中的圖片加載規(guī)則中的預(yù)設(shè)尺寸進(jìn)行比對(duì)，可以看出圖片加載規(guī)則中的預(yù)設(shè)尺寸“800”與該客戶端的屏幕高度匹配，此時(shí)可獲取該預(yù)設(shè)尺寸“800”對(duì)應(yīng)的地址信息“url1”；又如，如果獲取到的客戶端的高度為868，則可獲取到比該客戶端的高度預(yù)設(shè)尺寸大、且最接近其的預(yù)設(shè)尺寸為“900”，此時(shí)可獲取預(yù)設(shè)尺寸“900”對(duì)應(yīng)的地址信息“url3”；再如，如果獲取到的客戶端的屏幕高度為1200，可以看出圖片標(biāo)簽中定義的規(guī)則都與客戶端的高度不符合，則此時(shí)可獲取該圖片標(biāo)簽中定義的默認(rèn)圖片的地址信息“default_url”。由此，根據(jù)圖片標(biāo)簽中自定義的圖片加載規(guī)則和客戶端的尺寸信息獲取該客戶端對(duì)應(yīng)的待加載圖片的地址信息，從而選擇最優(yōu)尺寸的圖片進(jìn)行加載。

S103，根據(jù)地址信息加載對(duì)應(yīng)的圖片。

具體地，在根據(jù)客戶端的尺寸信息從圖片標(biāo)簽中獲取到對(duì)應(yīng)的地址信息時(shí)，可將該地址信息作為對(duì)應(yīng)的圖片標(biāo)簽所對(duì)應(yīng)的圖片的加載地址，瀏覽器在為用戶提供并展現(xiàn)網(wǎng)頁頁面時(shí)，可根據(jù)獲取到的地址信息加載該地址信息對(duì)應(yīng)的圖片。例如，當(dāng)客戶端的尺寸信息與預(yù)設(shè)尺寸信息匹配時(shí)，在網(wǎng)頁渲染時(shí)可根據(jù)該預(yù)設(shè)尺寸信息對(duì)應(yīng)的地址信息來加載該地址信息對(duì)應(yīng)的圖片；當(dāng)客戶端的尺寸信息與預(yù)設(shè)尺寸信息不匹配時(shí)，在網(wǎng)頁渲染時(shí)可根據(jù)圖片標(biāo)簽中的默認(rèn)地址信息來加載其對(duì)應(yīng)的圖片，即加載默認(rèn)圖片。由此，可根據(jù)選擇出的最優(yōu)尺寸的圖片進(jìn)行加載，節(jié)省了帶寬資源和流量，并且使得頁面更加快速的展示出現(xiàn)。

進(jìn)一步的，在本申請(qǐng)的一個(gè)實(shí)施例中，在根據(jù)地址信息加載對(duì)應(yīng)的圖片之后，該圖片的加載方法還可包括：判斷是否加載成功；以及如果加載未成功，則在預(yù)設(shè)時(shí)間之后重新進(jìn)行加載。其中，在本申請(qǐng)的實(shí)施例中，預(yù)設(shè)時(shí)間可為預(yù)先自定義的，如2秒等。具體地，在根據(jù)地址信息加載對(duì)應(yīng)的圖片之后，可判斷此次加載圖片是否能夠加載成功，如果不能加載成功，則可在預(yù)設(shè)時(shí)間(如2秒)之后重新發(fā)起加載，直至加載成功，則認(rèn)為一次圖片加載的過程結(jié)束。由此，針對(duì)加載失敗的情況，通過設(shè)置失敗重試功能來實(shí)現(xiàn)圖片盡可 能地加載成功的目的。

下面將結(jié)合圖2對(duì)本申請(qǐng)實(shí)施例的圖片的加載方法進(jìn)行詳細(xì)描述。

如圖2所示，在獲取圖片標(biāo)簽和客戶端的尺寸信息之后，可先從圖片標(biāo)簽自定義屬性中解析出自定義的圖片加載規(guī)則(S201)。之后，可將客戶端的尺寸信息與自定義的圖片加載規(guī)則進(jìn)行比對(duì)，以篩選出最佳的圖片加載規(guī)則(即最佳的預(yù)設(shè)尺寸所對(duì)應(yīng)的地址信息)(S202)。如果客戶端的尺寸信息與圖片標(biāo)簽中的圖片加載規(guī)則沒有匹配上，則可從圖片標(biāo)簽中提取默認(rèn)圖片的地址信息(S203)；如果客戶端的尺寸信息與圖片標(biāo)簽中的一個(gè)圖片加載規(guī)則匹配上，則可提取該圖片加載規(guī)則所對(duì)應(yīng)的地址信息，并根據(jù)提取的地址信息開始加載圖片(S204)。判斷此次加載是否成功(S205)，若否，則每隔預(yù)設(shè)時(shí)間(如2秒)重新發(fā)起加載，直至圖片加載成功(S206)，此時(shí)一次圖片加載的過程結(jié)束。

本申請(qǐng)實(shí)施例的圖片的加載方法，可先獲取圖片標(biāo)簽，并獲取客戶端的尺寸信息，之后，根據(jù)客戶端的尺寸信息從圖片標(biāo)簽中獲取對(duì)應(yīng)的地址信息，并根據(jù)地址信息加載對(duì)應(yīng)的圖片，即基于Javascript來實(shí)現(xiàn)，其兼容主流瀏覽器，根據(jù)在圖片標(biāo)簽(如img標(biāo)簽)上自定義的加載規(guī)則，和當(dāng)前客戶端屏幕的高度做比對(duì)，從而選擇最優(yōu)尺寸的圖片加載，節(jié)省了帶寬資源和流量，并提高了頁面的展示速度，并且通過設(shè)置失敗重試功能來實(shí)現(xiàn)圖片盡可能地加載成功的目的。

為了實(shí)現(xiàn)上述實(shí)施例，本申請(qǐng)還提出了一種圖片的加載裝置。

圖3是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的圖片的加載裝置的結(jié)構(gòu)示意圖。如圖3所示，該圖片的加載裝置可以包括：第一獲取模塊10、第二獲取模塊20和加載模塊30。

具體地，第一獲取模塊10可用于獲取圖片標(biāo)簽，并獲取客戶端的尺寸信息。更具體地，當(dāng)接收到用戶發(fā)送針對(duì)某個(gè)網(wǎng)站頁面的瀏覽請(qǐng)求時(shí)，可根據(jù)用戶的瀏覽請(qǐng)求提供相應(yīng)的網(wǎng)頁信息，在為用戶提供網(wǎng)頁信息的過程中，第一獲取模塊10可從該網(wǎng)頁信息中讀取該頁面對(duì)應(yīng)的源碼，從源碼中通過查找代表圖片標(biāo)簽的代碼(如<img>等)來獲取該頁面中所含有的圖片標(biāo)簽，并且在讀取網(wǎng)頁頁面對(duì)應(yīng)的源碼的同時(shí)，獲取該用戶對(duì)應(yīng)的客戶端的尺寸信息。其中，在本申請(qǐng)的實(shí)施例中，客戶端的尺寸信息(如客戶端的屏幕高度)可由客戶端直接通過安裝在客戶端中的jquery工具獲取，可以理解，客戶端的尺寸信息也可由客戶端根據(jù)服務(wù)器發(fā)送的獲取指令后通過jquery工具獲取的，還可由服務(wù)器直接通過安裝在服務(wù)器中的jquery工具獲取。此外，還可以通過其他工具獲取客戶端的尺寸信息，如JS工具，本申請(qǐng)實(shí)施例對(duì)于獲取客戶端的尺寸信息的具體方式不做具體限定。此外，在本申請(qǐng)的實(shí)施例中，尺寸信息可包括但不限于客戶端的屏幕尺寸大小(如客戶端的屏幕高度等)。在本申請(qǐng)的實(shí)施例中，客戶端可以是手機(jī)、平板電腦、PC機(jī)、個(gè)人數(shù)字助理等具有各種操作系 統(tǒng)的硬件設(shè)備。

第二獲取模塊20可用于根據(jù)客戶端的尺寸信息從圖片標(biāo)簽中獲取對(duì)應(yīng)的地址信息。其中，在本申請(qǐng)的一個(gè)實(shí)施例中，圖片標(biāo)簽可包括但不限于多個(gè)預(yù)設(shè)尺寸信息及多個(gè)預(yù)設(shè)尺寸信息對(duì)應(yīng)的地址信息。需要說明的是，在本申請(qǐng)的實(shí)施例中，圖片標(biāo)簽中可具有自定義的圖片加載規(guī)則。舉例而言，可在圖片標(biāo)簽中添加一個(gè)自定義屬性lazyimg來定義圖片加載規(guī)則，每個(gè)圖片標(biāo)簽可以添加多個(gè)規(guī)則，每個(gè)規(guī)則之間可通過分隔符“|”隔開。每個(gè)規(guī)則參數(shù)之間通過符號(hào)“，”分隔，如圖片標(biāo)簽的形式可如下：<img src＝”default.jpg”lazyimg＝”height,url|height2,url|height3,url|…|default_url”/>，其中，規(guī)則數(shù)據(jù)定義說明如下：height：客戶端的屏幕高度；url：待加載圖片的地址信息url(Uniform Resoure Locator，統(tǒng)一資源定位符)；default_url：默認(rèn)圖片的地址信息url。例如，假設(shè)獲取到某個(gè)頁面中的圖片標(biāo)簽為“<img src＝”AA.jpg”lazyimg＝”800,url1|600,url2|900,url3|default_url”/>”，可以看出，該圖片標(biāo)簽中具有一個(gè)自定義屬性lazyimg，該屬性中具有“800,url1”、“600,url2”、“900,url3”和“default_url”這四種規(guī)則，其中，“800”、“600”、“900”分別是預(yù)設(shè)尺寸，“url1”、“url2”、“url3”分別是預(yù)設(shè)尺寸所對(duì)應(yīng)的地址信息，此外地址信息中還含有一個(gè)默認(rèn)地址信息“default_url”。

在本申請(qǐng)的實(shí)施例中，如圖4所示，該第二獲取模塊20可包括比對(duì)單元21和獲取單元22。具體地，比對(duì)單元21可用于將客戶端的尺寸信息與圖片標(biāo)簽中預(yù)設(shè)尺寸信息進(jìn)行比對(duì)。獲取單元22可用于在客戶端的尺寸信息與圖片標(biāo)簽中的一個(gè)預(yù)設(shè)尺寸信息匹配時(shí)，提取匹配的預(yù)設(shè)尺寸信息所對(duì)應(yīng)的地址信息。在本申請(qǐng)的實(shí)施例中，獲取單元22還可用于在客戶端的尺寸信息與圖片標(biāo)簽中的預(yù)設(shè)尺寸信息均不匹配時(shí)，提取默認(rèn)的圖片所對(duì)應(yīng)的地址信息。

其中，在本申請(qǐng)的實(shí)施例中，獲取單元22在客戶端的尺寸信息與預(yù)設(shè)尺寸信息之間的差值在預(yù)設(shè)范圍之內(nèi)時(shí)，可判斷客戶端的尺寸信息與預(yù)設(shè)尺寸信息匹配。也就是說，如果存在比客戶端的尺寸信息大、且最接近客戶端的尺寸信息的預(yù)設(shè)尺寸信息，獲取單元22則可判斷該預(yù)設(shè)尺寸信息與客戶端的尺寸信息匹配。

更具體地，比對(duì)單元21可先從圖片標(biāo)簽中解析出自定義的圖片加載規(guī)則，之后，可根據(jù)獲取到的客戶端的尺寸信息(如屏幕高度)和自定義的圖片加載規(guī)則中定義的height(即上述的預(yù)設(shè)尺寸信息)進(jìn)行大小比對(duì)，獲取單元22可找到與客戶端的尺寸具有相同尺寸的那個(gè)規(guī)則，或者找到比客戶端的尺寸信息大、且最接近客戶端的尺寸的那個(gè)規(guī)則，并獲取該規(guī)則對(duì)應(yīng)的地址信息。例如，假設(shè)獲取到的圖片標(biāo)簽為：<img src＝”AA.jpg”lazyimg＝”800,url1|600,url2|900,url3|default_url”/>，如果獲取到的客戶的屏幕高度為800，則可將該屏幕高度“800”與圖片標(biāo)簽中的圖片加載規(guī)則中的預(yù)設(shè)尺寸進(jìn)行比對(duì)，可以看出 圖片加載規(guī)則中的預(yù)設(shè)尺寸“800”與該客戶端的屏幕高度匹配，此時(shí)可獲取該預(yù)設(shè)尺寸“800”對(duì)應(yīng)的地址信息“url1”；又如，如果獲取到的客戶端的高度為868，則可獲取到比該客戶端的高度預(yù)設(shè)尺寸大、且最接近其的預(yù)設(shè)尺寸為“900”，此時(shí)可獲取預(yù)設(shè)尺寸“900”對(duì)應(yīng)的地址信息“url3”；再如，如果獲取到的客戶端的屏幕高度為1200，可以看出圖片標(biāo)簽中定義的規(guī)則都與客戶端的高度不符合，則此時(shí)可獲取該圖片標(biāo)簽中定義的默認(rèn)圖片的地址信息“default_url”。由此，根據(jù)圖片標(biāo)簽中自定義的圖片加載規(guī)則和客戶端的尺寸信息獲取該客戶端對(duì)應(yīng)的待加載圖片的地址信息，從而選擇最優(yōu)尺寸的圖片進(jìn)行加載。

加載模塊30可用于根據(jù)地址信息加載對(duì)應(yīng)的圖片。更具體地，加載模塊30在第二獲取模塊20根據(jù)客戶端的尺寸信息從圖片標(biāo)簽中獲取到對(duì)應(yīng)的地址信息時(shí)，可將該地址信息作為對(duì)應(yīng)的圖片標(biāo)簽所對(duì)應(yīng)的圖片的加載地址。瀏覽器在為用戶提供并展現(xiàn)網(wǎng)頁頁面時(shí)，加載模塊30可根據(jù)獲取到的地址信息加載該地址信息對(duì)應(yīng)的圖片。例如，當(dāng)客戶端的尺寸信息與預(yù)設(shè)尺寸信息匹配時(shí)，在網(wǎng)頁渲染時(shí)，加載模塊30可根據(jù)該預(yù)設(shè)尺寸信息對(duì)應(yīng)的地址信息來加載該地址信息對(duì)應(yīng)的圖片；當(dāng)客戶端的尺寸信息與預(yù)設(shè)尺寸信息不匹配時(shí)，在網(wǎng)頁渲染時(shí)，加載模塊30可根據(jù)圖片標(biāo)簽中的默認(rèn)地址信息來加載其對(duì)應(yīng)的圖片，即加載默認(rèn)圖片。由此，可根據(jù)選擇出的最優(yōu)尺寸的圖片進(jìn)行加載，節(jié)省了帶寬資源和流量，并且使得頁面更加快速的展示出現(xiàn)。

進(jìn)一步的，在本申請(qǐng)的一個(gè)實(shí)施例中，如圖5所示，該圖片的加載裝置還可包括判斷模塊40，判斷模塊40可用于在加載模塊30根據(jù)地址信息加載對(duì)應(yīng)的圖片之后，判斷是否加載成功。在本申請(qǐng)的實(shí)施例中，加載模塊30還可用于在判斷模塊40判斷加載未成功時(shí)，在預(yù)設(shè)時(shí)間之后重新進(jìn)行加載。其中，在本申請(qǐng)的實(shí)施例中，預(yù)設(shè)時(shí)間可為預(yù)先自定義的，如2秒等。更具體地，在加載模塊30根據(jù)地址信息加載對(duì)應(yīng)的圖片之后，判斷模塊40可判斷此次加載圖片是否能夠加載成功，如果不能加載成功，則加載模塊30可在預(yù)設(shè)時(shí)間(如2秒)之后重新發(fā)起加載，直至加載成功，則認(rèn)為一次圖片加載的過程結(jié)束。由此，針對(duì)加載失敗的情況，通過設(shè)置失敗重試功能來實(shí)現(xiàn)圖片盡可能地加載成功的目的。

本申請(qǐng)實(shí)施例的圖片的加載裝置，可通過第一獲取模塊獲取圖片標(biāo)簽，并獲取客戶端的尺寸信息，第二獲取模塊根據(jù)客戶端的尺寸信息從圖片標(biāo)簽中獲取對(duì)應(yīng)的地址信息，加載模塊根據(jù)地址信息加載對(duì)應(yīng)的圖片，即基于Javascript來實(shí)現(xiàn)，其兼容主流瀏覽器，根據(jù)在圖片標(biāo)簽(如img標(biāo)簽)上自定義的加載規(guī)則，和當(dāng)前客戶端屏幕的高度做比對(duì)，從而選擇最優(yōu)尺寸的圖片加載，節(jié)省了帶寬資源和流量，并提高了頁面的展示速度，并且通過設(shè)置失敗重試功能來實(shí)現(xiàn)圖片盡可能地加載成功的目的。

在本申請(qǐng)的描述中，需要理解的是，術(shù)語“第一”、“第二”僅用于描述目的，而不能 理解為指示或暗示相對(duì)重要性或者隱含指明所指示的技術(shù)特征的數(shù)量。由此，限定有“第一”、“第二”的特征可以明示或者隱含地包括至少一個(gè)該特征。在本申請(qǐng)的描述中，“多個(gè)”的含義是至少兩個(gè)，例如兩個(gè)，三個(gè)等，除非另有明確具體的限定。

在本說明書的描述中，參考術(shù)語“一個(gè)實(shí)施例”、“一些實(shí)施例”、“示例”、“具體示例”、或“一些示例”等的描述意指結(jié)合該實(shí)施例或示例描述的具體特征、結(jié)構(gòu)、材料或者特點(diǎn)包含于本申請(qǐng)的至少一個(gè)實(shí)施例或示例中。在本說明書中，對(duì)上述術(shù)語的示意性表述不必須針對(duì)的是相同的實(shí)施例或示例。而且，描述的具體特征、結(jié)構(gòu)、材料或者特點(diǎn)可以在任一個(gè)或多個(gè)實(shí)施例或示例中以合適的方式結(jié)合。此外，在不相互矛盾的情況下，本領(lǐng)域的技術(shù)人員可以將本說明書中描述的不同實(shí)施例或示例以及不同實(shí)施例或示例的特征進(jìn)行結(jié)合和組合。

流程圖中或在此以其他方式描述的任何過程或方法描述可以被理解為，表示包括一個(gè)或更多個(gè)用于實(shí)現(xiàn)特定邏輯功能或過程的步驟的可執(zhí)行指令的代碼的模塊、片段或部分，并且本申請(qǐng)的優(yōu)選實(shí)施方式的范圍包括另外的實(shí)現(xiàn)，其中可以不按所示出或討論的順序，包括根據(jù)所涉及的功能按基本同時(shí)的方式或按相反的順序，來執(zhí)行功能，這應(yīng)被本申請(qǐng)的實(shí)施例所屬技術(shù)領(lǐng)域的技術(shù)人員所理解。

在流程圖中表示或在此以其他方式描述的邏輯和/或步驟，例如，可以被認(rèn)為是用于實(shí)現(xiàn)邏輯功能的可執(zhí)行指令的定序列表，可以具體實(shí)現(xiàn)在任何計(jì)算機(jī)可讀介質(zhì)中，以供指令執(zhí)行系統(tǒng)、裝置或設(shè)備(如基于計(jì)算機(jī)的系統(tǒng)、包括處理器的系統(tǒng)或其他可以從指令執(zhí)行系統(tǒng)、裝置或設(shè)備取指令并執(zhí)行指令的系統(tǒng))使用，或結(jié)合這些指令執(zhí)行系統(tǒng)、裝置或設(shè)備而使用。就本說明書而言，"計(jì)算機(jī)可讀介質(zhì)"可以是任何可以包含、存儲(chǔ)、通信、傳播或傳輸程序以供指令執(zhí)行系統(tǒng)、裝置或設(shè)備或結(jié)合這些指令執(zhí)行系統(tǒng)、裝置或設(shè)備而使用的裝置。計(jì)算機(jī)可讀介質(zhì)的更具體的示例(非窮盡性列表)包括以下：具有一個(gè)或多個(gè)布線的電連接部(電子裝置)，便攜式計(jì)算機(jī)盤盒(磁裝置)，隨機(jī)存取存儲(chǔ)器(RAM)，只讀存儲(chǔ)器(ROM)，可擦除可編輯只讀存儲(chǔ)器(EPROM或閃速存儲(chǔ)器)，光纖裝置，以及便攜式光盤只讀存儲(chǔ)器(CDROM)。另外，計(jì)算機(jī)可讀介質(zhì)甚至可以是可在其上打印所述程序的紙或其他合適的介質(zhì)，因?yàn)榭梢岳缤ㄟ^對(duì)紙或其他介質(zhì)進(jìn)行光學(xué)掃描，接著進(jìn)行編輯、解譯或必要時(shí)以其他合適方式進(jìn)行處理來以電子方式獲得所述程序，然后將其存儲(chǔ)在計(jì)算機(jī)存儲(chǔ)器中。

應(yīng)當(dāng)理解，本申請(qǐng)的各部分可以用硬件、軟件、固件或它們的組合來實(shí)現(xiàn)。在上述實(shí)施方式中，多個(gè)步驟或方法可以用存儲(chǔ)在存儲(chǔ)器中且由合適的指令執(zhí)行系統(tǒng)執(zhí)行的軟件或固件來實(shí)現(xiàn)。例如，如果用硬件來實(shí)現(xiàn)，和在另一實(shí)施方式中一樣，可用本領(lǐng)域公知的下列技術(shù)中的任一項(xiàng)或他們的組合來實(shí)現(xiàn)：具有用于對(duì)數(shù)據(jù)信號(hào)實(shí)現(xiàn)邏輯功能的邏輯門電路 的離散邏輯電路，具有合適的組合邏輯門電路的專用集成電路，可編程門陣列(PGA)，現(xiàn)場(chǎng)可編程門陣列(FPGA)等。

本技術(shù)領(lǐng)域的普通技術(shù)人員可以理解實(shí)現(xiàn)上述實(shí)施例方法攜帶的全部或部分步驟是可以通過程序來指令相關(guān)的硬件完成，所述的程序可以存儲(chǔ)于一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)中，該程序在執(zhí)行時(shí)，包括方法實(shí)施例的步驟之一或其組合。

此外，在本申請(qǐng)各個(gè)實(shí)施例中的各功能單元可以集成在一個(gè)處理模塊中，也可以是各個(gè)單元單獨(dú)物理存在，也可以兩個(gè)或兩個(gè)以上單元集成在一個(gè)模塊中。上述集成的模塊既可以采用硬件的形式實(shí)現(xiàn)，也可以采用軟件功能模塊的形式實(shí)現(xiàn)。所述集成的模塊如果以軟件功能模塊的形式實(shí)現(xiàn)并作為獨(dú)立的產(chǎn)品銷售或使用時(shí)，也可以存儲(chǔ)在一個(gè)計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中。

上述提到的存儲(chǔ)介質(zhì)可以是只讀存儲(chǔ)器，磁盤或光盤等。

盡管上面已經(jīng)示出和描述了本申請(qǐng)的實(shí)施例，可以理解的是，上述實(shí)施例是示例性的，不能理解為對(duì)本申請(qǐng)的限制，本領(lǐng)域的普通技術(shù)人員在本申請(qǐng)的范圍內(nèi)可以對(duì)上述實(shí)施例進(jìn)行變化、修改、替換和變型。