本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，特別是涉及一種圖片加載方法和裝置。

背景技術(shù)：

在現(xiàn)有技術(shù)中，應(yīng)用程序(application，簡稱app)可以一次性加載多張圖片，而且，在瀏覽列表頁時(shí)，頁面中可以顯示的圖片數(shù)量通常沒有限制。由于移動(dòng)終端屏幕顯示區(qū)域大小固定，所以通常僅加載處于顯示區(qū)域中頁面圖片，用戶向下滑動(dòng)頁面時(shí)，再加載新出現(xiàn)在顯示區(qū)域中的圖片。目前，為了減少流量的消耗，同時(shí)保證app流暢的用戶體驗(yàn)，可以將已經(jīng)加載過的圖片進(jìn)行緩存，當(dāng)用戶將頁面回滾至之前的位置時(shí)，允許控件從緩存中加載圖片，這樣可以避免重新下載、處理圖片的過程。

現(xiàn)有的緩存策略大多使用近期最少使用算法(leastrecentlyused，簡稱lru)，即將最近使用的圖片插入到一個(gè)緩存隊(duì)列中，當(dāng)緩存超出設(shè)置的大小時(shí)，剔除最近最少使用到的圖片資源。這樣在滑動(dòng)app列表頁時(shí)，會(huì)優(yōu)先讀取緩存里的圖片，當(dāng)緩存中圖片不存在時(shí)才會(huì)從網(wǎng)絡(luò)下載圖片。

現(xiàn)有的緩存策略雖然可以對(duì)緩存圖片進(jìn)行重復(fù)利用，但是，在滑動(dòng)列表頁的過程中，由于在顯示區(qū)域中從未顯示過的新圖片不在緩存中，并不能立即顯示出來，用戶依然需要等待圖片加載，等待圖片從無到有的過程，用戶體驗(yàn)仍需優(yōu)化。

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

本發(fā)明提供一種圖片加載方法和裝置，用以解決現(xiàn)有技術(shù)中從未在顯示區(qū) 域中顯示過的新圖片不在緩存中，用戶依然需要等待圖片加載的問題。

針對(duì)上述技術(shù)問題，本發(fā)明是通過以下技術(shù)方案來解決的。

本發(fā)明提供了一種圖片加載方法，包括：在顯示當(dāng)前顯示區(qū)域內(nèi)的圖片時(shí)，預(yù)先加載所述顯示區(qū)域之外的圖片；緩存預(yù)先加載的所述圖片。

其中，還包括：當(dāng)所述緩存的已用容量大于預(yù)設(shè)的閾值時(shí)，在所述緩存中清除距離當(dāng)前顯示區(qū)域最遠(yuǎn)的圖片。

其中，所述預(yù)先加載所述顯示區(qū)域之外的圖片，包括：預(yù)先加載處于所述顯示區(qū)域之外預(yù)定范圍之內(nèi)的圖片。

其中，所述預(yù)定范圍位于所述顯示區(qū)域兩側(cè)；或者，所述預(yù)定范圍位于所述顯示區(qū)域一側(cè)。

其中，在所述顯示當(dāng)前顯示區(qū)域內(nèi)的圖片之前，還包括：判斷所述當(dāng)前顯示區(qū)域內(nèi)的圖片是否存在于所述緩存中；若是，則從所述緩存中獲取所述圖片并顯示；若否，則從網(wǎng)絡(luò)側(cè)加載所述圖片并顯示，并且緩存加載的所述圖片。

本發(fā)明還提供了一種圖片加載裝置，包括：加載模塊，用于在顯示當(dāng)前顯示區(qū)域內(nèi)的圖片時(shí)，預(yù)先加載所述顯示區(qū)域之外的圖片；緩存模塊，用于緩存預(yù)先加載的所述圖片。

其中，所述裝置還包括清除模塊；所述清除模塊，用于當(dāng)所述緩存的已用容量大于預(yù)設(shè)的閾值時(shí)，在所述緩存中清除距離當(dāng)前顯示區(qū)域最遠(yuǎn)的圖片。

其中，所述加載模塊用于：預(yù)先加載處于所述顯示區(qū)域之外預(yù)定范圍之內(nèi)的圖片。

其中，所述預(yù)定范圍位于所述顯示區(qū)域兩側(cè)；或者，所述預(yù)定范圍位于所述顯示區(qū)域一側(cè)。

其中，所述加載模塊還用于：在所述顯示當(dāng)前顯示區(qū)域內(nèi)的圖片之前，判斷所述當(dāng)前顯示區(qū)域內(nèi)的圖片是否存在于所述緩存中；在判定為是的情況下，則從所述緩存中獲取所述圖片并顯示；在判定為否的情況下，則從網(wǎng)絡(luò)側(cè)加載所述圖片并顯示，并且緩存加載的所述圖片。

本發(fā)明有益效果如下：

本發(fā)明對(duì)處于屏幕顯示區(qū)域之外的圖片進(jìn)行預(yù)加載，并在加載完成之后對(duì)圖片進(jìn)行緩存，以便在用戶滑動(dòng)頁面時(shí)，快速顯示圖片，提高用戶體驗(yàn)效果。

附圖說明

圖1是根據(jù)本發(fā)明一實(shí)施例的圖片加載方法的流程圖；

圖2是根據(jù)本發(fā)明一實(shí)施例的圖片加載示意圖；

圖3是根據(jù)本發(fā)明一實(shí)施例的圖片加載裝置的結(jié)構(gòu)圖。

具體實(shí)施方式

本發(fā)明在app需要加載大量圖片的場景下，對(duì)處于屏幕顯示區(qū)域之外的圖片進(jìn)行預(yù)加載，并在加載完成之后對(duì)圖片進(jìn)行緩存，以便在用戶滑動(dòng)頁面時(shí)，快速顯示圖片，提高用戶體驗(yàn)效果。進(jìn)一步地，本發(fā)明在緩存容量達(dá)到預(yù)定值時(shí)，按照圖片距離顯示區(qū)域的遠(yuǎn)近，先回收距離顯示區(qū)域最遠(yuǎn)的圖片資源，再回收距離顯示區(qū)域較近的圖片資源，依次來提高緩存的有效利用率。

以下結(jié)合附圖以及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不限定本發(fā)明。

本發(fā)明實(shí)施例提供了一種圖片加載方法。圖1是根據(jù)本發(fā)明一實(shí)施例的圖片加載方法的流程圖。

步驟s110，在顯示當(dāng)前顯示區(qū)域內(nèi)的圖片時(shí)，預(yù)先加載所述顯示區(qū)域之外的圖片。

在所述顯示當(dāng)前顯示區(qū)域內(nèi)的圖片之前，獲取頁面在屏幕中的當(dāng)前顯示區(qū)域；判斷所述當(dāng)前顯示區(qū)域內(nèi)的圖片是否存在于緩存中；若是，則從所述緩存中獲取所述圖片并顯示；若否，則從網(wǎng)絡(luò)側(cè)加載所述圖片并顯示，而且需要將加載的所述圖片進(jìn)行緩存，以便后續(xù)可以重復(fù)利用該圖片。

在所述顯示當(dāng)前顯示區(qū)域內(nèi)的圖片之時(shí)，為了使用戶即將瀏覽的圖片快速 顯示出來，預(yù)先加載所述顯示區(qū)域之外的圖片，如果緩存容量有限，可以預(yù)先加載處于所述顯示區(qū)域之外、預(yù)定范圍之內(nèi)的圖片。該預(yù)定范圍位于顯示區(qū)域的周圍，并且與顯示區(qū)域相鄰。該預(yù)定范圍內(nèi)包括一張或多張圖片。

具體的，預(yù)定范圍位于顯示區(qū)域兩側(cè)；或者預(yù)定范圍位于顯示區(qū)域一側(cè)。

預(yù)定范圍可以根據(jù)緩存的容量來設(shè)置，即根據(jù)緩存的可用容量允許預(yù)加載的圖片數(shù)量來設(shè)置預(yù)定范圍。

預(yù)定范圍可以用面積來衡量，也可以用圖片數(shù)量來衡量。例如：預(yù)定范圍的面積等于顯示區(qū)域的面積，也即是說，預(yù)加載當(dāng)前顯示區(qū)域前一屏范圍內(nèi)的圖片和/或后一屏范圍內(nèi)的圖片。又如：預(yù)定范圍是緊鄰顯示區(qū)域的多張圖片所在的范圍。在獲取頁面時(shí)，就可以知道頁面中每張圖片的位置，因此可以根據(jù)圖片在頁面之中的位置來確定需要加載的是哪一張圖片。

如果預(yù)定范圍位于顯示區(qū)域的一側(cè)，則可以根據(jù)用戶滑動(dòng)頁面的方向確定預(yù)定范圍的位置。例如：如果用戶向上滑動(dòng)頁面，則預(yù)定范圍位于顯示區(qū)域下方；如果用戶向下滑動(dòng)頁面，則預(yù)定范圍位于顯示區(qū)域上方。

步驟s120，緩存預(yù)先加載的所述圖片。

在用戶滑動(dòng)頁面的過程中，不斷地緩存預(yù)加載圖片，由于緩存的容量具有上限，所以當(dāng)所述緩存的已用容量大于預(yù)設(shè)的閾值時(shí)，在所述緩存中清除距離當(dāng)前顯示區(qū)域最遠(yuǎn)的圖片。該閾值為實(shí)驗(yàn)值或經(jīng)驗(yàn)值。這樣可以防止緩存溢出，還可以保證當(dāng)前顯示區(qū)域的臨近區(qū)域內(nèi)的圖片可以快速顯示。

例如：圖2是根據(jù)本發(fā)明一實(shí)施例的圖片加載示意圖。本例中的頁面為列表頁，列表頁中有n(n大于0)張圖片；頁面在屏幕顯示區(qū)域內(nèi)的圖片為圖片3、圖片4和圖片5，在顯示圖片3、圖片4和圖片5之前，先確定緩存中是否已經(jīng)存儲(chǔ)了圖片3、圖片4和圖片5，如果已經(jīng)存儲(chǔ)，則可以直接獲取并顯示，如果沒有存儲(chǔ)，則從網(wǎng)絡(luò)側(cè)加載圖片3、圖片4和圖片5并顯示，之后緩存圖片3、圖片4和圖片5；在緩存的可用容量中去除圖片3、圖片4和圖片5，剩 余的可用容量還允許緩存4張圖片，則可以確定預(yù)定范圍為顯示區(qū)域之外上、下各兩張圖片的范圍，即圖片1、圖片2、圖片6和圖片7；在顯示圖片3、圖片4和圖片5的過程中，預(yù)加載圖片1、圖片2、圖片6和圖片7，并放入緩存中；用戶滑動(dòng)頁面過程，如果圖片3移出顯示區(qū)域，圖片6進(jìn)入顯示區(qū)域，則直接從緩存中獲取圖片6并顯示，在顯示圖片4、圖片5和圖片6的過程中，由于圖片7已經(jīng)在緩存中，可以預(yù)加載圖片8并緩存，以此類推；如果用戶再次滑動(dòng)頁面至圖片3、圖片4和圖片5所在的位置，可以再次從緩存中獲取圖片3、圖片4和圖片5并顯示。

本領(lǐng)域技術(shù)人員應(yīng)當(dāng)知道，根據(jù)本發(fā)明的思想，預(yù)定區(qū)域還可以是顯示區(qū)域下方的4張圖片的范圍，還可以是顯示區(qū)域上方1張圖片的范圍+顯示區(qū)域下方3張圖片的范圍。

本發(fā)明還提供了一種圖片加載裝置。圖3是根據(jù)本發(fā)明一實(shí)施例的圖片加載裝置的結(jié)構(gòu)圖。

該裝置包括：

加載模塊310，用于在顯示當(dāng)前顯示區(qū)域內(nèi)的圖片時(shí)，預(yù)先加載所述顯示區(qū)域之外的圖片。

緩存模塊320，用于緩存預(yù)先加載的所述圖片。

在一個(gè)實(shí)施例中，所述裝置還包括清除模塊(未示出)；所述清除模塊，用于當(dāng)所述緩存的已用容量大于預(yù)設(shè)的閾值時(shí)，在所述緩存中清除距離當(dāng)前顯示區(qū)域最遠(yuǎn)的圖片。

在另一實(shí)施例中，加載模塊320，用于預(yù)先加載處于所述顯示區(qū)域之外預(yù)定范圍之內(nèi)的圖片。加載模塊320具體用于：所述預(yù)定范圍位于所述顯示區(qū)域兩側(cè)；或者，所述預(yù)定范圍位于所述顯示區(qū)域一側(cè)。

在又一實(shí)施例中，所述加載模塊320還用于在所述顯示當(dāng)前顯示區(qū)域內(nèi)的圖片之前，判斷所述當(dāng)前顯示區(qū)域內(nèi)的圖片是否存在于所述緩存中；在判定為 是的情況下，則從所述緩存中獲取所述圖片并顯示；在判定為否的情況下，則從網(wǎng)絡(luò)側(cè)加載所述圖片并顯示，并且緩存加載的所述圖片。

本實(shí)施例所述的裝置的功能已經(jīng)在圖1、圖2所示的方法實(shí)施例中進(jìn)行了描述，故本實(shí)施例的描述中未詳盡之處，可以參見前述實(shí)施例中的相關(guān)說明，在此不做贅述。

盡管為示例目的，已經(jīng)公開了本發(fā)明的優(yōu)選實(shí)施例，本領(lǐng)域的技術(shù)人員將意識(shí)到各種改進(jìn)、增加和取代也是可能的，因此，本發(fā)明的范圍應(yīng)當(dāng)不限于上述實(shí)施例。