本技術(shù)涉及圖片加載，特別是涉及一種圖片加載方法和裝置。

背景技術(shù)：

1、隨著數(shù)據(jù)可視化分析大屏的推廣，以及硬件設(shè)備分辨率的逐步提高，對圖片素材的精度及質(zhì)量的要求也隨之提高了。這就導(dǎo)致圖片素材體積增大，圖片加載的耗時增長?，F(xiàn)階段一般是通過壓縮圖片、使用瀏覽器緩存圖片等手段優(yōu)化圖片加載性能。

2、針對圖片的壓縮方式通常有兩種，分別是有損壓縮和無損壓縮。有損壓縮導(dǎo)致圖片中某些數(shù)據(jù)被有意地刪除，且被刪除的數(shù)據(jù)不再恢復(fù)。有損壓縮方法利用了人類視覺感知的局限性，如對某些頻率的不敏感性和對時間上的容忍度，來減少數(shù)據(jù)的大小，如此來實現(xiàn)較高的壓縮比，但有損壓縮方法會影響到圖片數(shù)據(jù)的最終呈現(xiàn)質(zhì)量，尤其是在高分辨率渲染或?qū)D片應(yīng)用到專業(yè)用途時，這種圖片質(zhì)量的損失會更加明顯。無損壓縮保證了原始數(shù)據(jù)的完整性，在解壓縮后能夠完全恢復(fù)，缺點是獲得的壓縮比有限。

3、瀏覽器緩存圖片的目的是為了節(jié)約網(wǎng)絡(luò)的資源，實現(xiàn)圖片的加速瀏覽。瀏覽器在用戶磁盤上對最近請求過的圖片進(jìn)行存儲，當(dāng)訪問者再次請求訪問這個圖片時，瀏覽器就可以從用戶磁盤中讀取圖片，這樣就可以加速圖片的閱覽。

4、以上提供的圖片加載方法難以顧全圖片質(zhì)量、壓縮比和讀取速度的問題。目前有待提出一種能夠兼顧上述多方面要求的圖片加載方法，以提升圖片加載的總和性能。

技術(shù)實現(xiàn)思路

1、基于上述問題，本技術(shù)提供了一種圖片加載方法和裝置，目的是提升圖片加載的性能。

2、本技術(shù)實施例公開了如下技術(shù)方案：

3、本技術(shù)第一方面提供了一種圖片加載方法，該方法包括：

4、接收客戶端上傳的圖片，并確定所述圖片的資源大?。?/p>

5、根據(jù)所述圖片的資源大小所屬的資源量區(qū)間，以及多種資源量區(qū)間與圖片類別的對應(yīng)關(guān)系，對所述圖片進(jìn)行分類；

6、若所述圖片的類別為第一類別，將所述圖片自動裁切為多個子圖片；其中，所述第一類別為最大的資源量區(qū)間對應(yīng)的圖片類別；

7、將所述多個子圖片提供給所述客戶端，以使所述客戶端緩存所述多個子圖片并執(zhí)行圖片加載操作；其中，所述客戶端緩存所述多個子圖片的方式為基于所述子圖片的資源大小確定的；所述客戶端執(zhí)行所述圖片加載操作的方式為基于所加載的圖片的資源大小確定的。

8、所述第一類別對應(yīng)的資源量區(qū)間為[10mb,+∞)；所述方法還包括：

9、若所述圖片的類別為第二類別，將所述圖片自動有損壓縮生成縮略圖；所述第二類別對應(yīng)的資源量區(qū)間為[1mb,10mb)；

10、若所述圖片的類別為第三類別，且所述圖片的資源大小在(0，500kb)區(qū)間內(nèi)，則不壓縮所述圖片；

11、若所述圖片的類別為第三類別，且所述圖片的資源大小在[500kb，1mb)區(qū)間內(nèi)，則將所述圖片進(jìn)行無損壓縮；所述第三類別對應(yīng)的資源量區(qū)間為(0,1mb)。

12、所述客戶端緩存所述多個子圖片的方式為：

13、判斷子圖片的資源大小是否在[1mb,10mb)區(qū)間內(nèi)，若是，采用客戶端的內(nèi)存數(shù)據(jù)庫緩存的方式緩存子圖片；

14、若否，則采用客戶端的瀏覽器緩存和磁盤緩存的方式緩存子圖片。

15、在可選地實現(xiàn)方式中，所述客戶端緩存所述圖片的方式還包括：

16、若所述圖片的類別為第二類別，將所述圖片提供給所述客戶端，以使所述客戶端緩存所述圖片并執(zhí)行圖片加載操作；

17、采用客戶端的內(nèi)存數(shù)據(jù)庫緩存的方式緩存所述圖片的原圖，并采用瀏覽器緩存和磁盤緩存的方式緩存所述圖片的縮略圖；

18、若所述圖片的類別為第三類別，將所述圖片提供給所述客戶端，以使所述客戶端根據(jù)所述圖片的資源大小確定是否進(jìn)行緩存，并執(zhí)行圖片加載操作；其中，若所述圖片的資源大小在(0，500kb)區(qū)間內(nèi)，則由所述客戶端采用瀏覽器緩存和磁盤緩存的方式緩存所述圖片；若所述圖片的資源大小在[500kb，1mb)區(qū)間內(nèi)，則將所述圖片進(jìn)行無損壓縮后，由所述客戶端采用瀏覽器緩存和磁盤緩存的方式緩存無損壓縮后的圖片。

19、所述客戶端執(zhí)行所述圖片加載操作的方式為：

20、并行讀取客戶端的內(nèi)存數(shù)據(jù)庫的多條區(qū)塊資源，以確定內(nèi)存數(shù)據(jù)庫是否命中所述多個子圖片；

21、若是，則從所述多條區(qū)塊資源中加載所述多個子圖片。

22、在可選地實現(xiàn)方式中，所述客戶端執(zhí)行所述圖片加載操作的方式還包括：

23、若所述圖片的類別為第二類別，所述客戶端在客戶端的內(nèi)存數(shù)據(jù)庫、瀏覽器內(nèi)存以及磁盤內(nèi)存中并行讀取所述圖片的原圖和縮略圖，判斷緩存介質(zhì)命中與否，若命中，先加載縮略圖再加載原圖；

24、若所述圖片的類別為第三類別，所述客戶端在客戶端的瀏覽器內(nèi)存和磁盤內(nèi)存中讀取所述圖片，判斷緩存介質(zhì)命中與否，若命中，直接加載所述圖片。

25、在可選地實現(xiàn)方式中，所述圖片加載方法還包括：

26、所述服務(wù)端存儲所述客戶端上傳的圖片以及所述圖片的處理結(jié)果；

27、所述服務(wù)端響應(yīng)于所述客戶端的圖片資源讀取請求，向所述客戶端提供與所述圖片資源讀取請求對應(yīng)的圖片；所述圖片資源讀取請求為所述客戶端在緩存介質(zhì)中未命中圖片資源的條件下生成并發(fā)送給所述服務(wù)端的。

28、本技術(shù)第二方面提供了又一種圖片加載方法，該方法包括：

29、向服務(wù)端上傳圖片，以使所述服務(wù)端根據(jù)所述圖片的資源大小所屬的資源量區(qū)間，以及多種資源量區(qū)間與圖片類別的對應(yīng)關(guān)系，對所述圖片進(jìn)行分類；

30、接收所述服務(wù)端對所述圖片的分類結(jié)果，若所述圖片為第一類別，緩存所述圖片經(jīng)過所述服務(wù)端自動裁切后生成的多個子圖片；其中，緩存所述多個子圖片的方式為基于所述子圖片的資源大小確定的；所述第一類別為最大的資源量區(qū)間對應(yīng)的圖片類別；

31、基于緩存的多個子圖片執(zhí)行圖片加載操作；其中，所述圖片加載操作的方式為基于所加載的圖片的資源大小確定的。

32、緩存所述圖片經(jīng)過所述服務(wù)端自動裁切后生成的子圖片的方式為：

33、判斷子圖片的資源大小是否在[1mb,10mb)區(qū)間內(nèi)，若是，采用內(nèi)存數(shù)據(jù)庫緩存的方式緩存子圖片；

34、若否，則采用瀏覽器緩存和磁盤緩存的方式緩存子圖片

35、所述第一類別對應(yīng)的資源量區(qū)間為[10mb,+∞)；所述方法還包括：

36、若所述圖片為第二類別，采用內(nèi)存數(shù)據(jù)庫緩存的方式緩存所述圖片的原圖，采用瀏覽器緩存和磁盤緩存的方式緩存所述圖片的縮略圖；所述第二類別對應(yīng)的資源量區(qū)間為[1mb,10mb)；所述縮略圖為所述服務(wù)端對所述第二類別的圖片進(jìn)行自動有損壓縮后生成的；

37、若所述圖片為第三類別，且所述圖片的資源大小在(0，500kb)區(qū)間內(nèi)，則采用瀏覽器緩存和磁盤緩存的方式緩存所述圖片；若所述圖片的類別為第三類別，且所述圖片的資源大小在[500kb，1mb)區(qū)間內(nèi)，則采用瀏覽器緩存和磁盤緩存的方式緩存由所述服務(wù)端對所述圖片進(jìn)行無損壓縮后的圖片；所述第三類別對應(yīng)的資源量區(qū)間為(0,1mb)。

38、所述基于緩存的多個子圖片執(zhí)行圖片加載操作，包括：

39、并行讀取客戶端的內(nèi)存數(shù)據(jù)庫的多條區(qū)塊資源，以確定內(nèi)存數(shù)據(jù)庫是否命中所述多個子圖片；

40、若是，則從所述多條區(qū)塊資源中加載所述多個子圖片。

41、在可選地實現(xiàn)方式中，所述基于緩存的多個子圖片執(zhí)行圖片加載操作還包括：

42、若所述圖片的類別為第二類別，在內(nèi)存數(shù)據(jù)庫、瀏覽器內(nèi)存以及磁盤內(nèi)存中并行讀取所述圖片的原圖和所述圖片的縮略圖，判斷緩存介質(zhì)命中與否，若命中，先加載縮略圖再加載原圖；

43、若所述圖片的類別為第三類別，在瀏覽器緩存和磁盤緩存中讀取所述圖片，判斷緩存介質(zhì)命中與否，若命中，直接加載所述圖片。

44、所述服務(wù)端存儲有所述客戶端上傳的圖片以及所述圖片的處理結(jié)果；所述方法還包括：

45、若在緩存介質(zhì)中未命中圖片資源，則向所述服務(wù)端發(fā)送圖片資源讀取請求；

46、接收所述服務(wù)端提供的與所述圖片資源讀取請求對應(yīng)的圖片；

47、根據(jù)所述服務(wù)端提供的與所述圖片資源讀取請求對應(yīng)的圖片，執(zhí)行圖片加載操作和緩存操作。

48、本技術(shù)第三方面提供了一種圖片加載裝置，該裝置包括：

49、圖片接收模塊，用于接收客戶端上傳的圖片，并確定所述圖片的資源大??；

50、圖片類別確定模塊，用于根據(jù)所述圖片的資源大小所屬的資源量區(qū)間，以及多種資源量區(qū)間與圖片類別的對應(yīng)關(guān)系，對所述圖片進(jìn)行分類；

51、圖片處理模塊，用于若所述圖片的類別為第一類別，將所述圖片自動裁切為多個子圖片；其中，所述第一類別為最大的資源量區(qū)間對應(yīng)的圖片類別；

52、圖片發(fā)送模塊，用于將所述多個子圖片提供給所述客戶端，以使所述客戶端緩存所述多個子圖片并執(zhí)行圖片加載操作；其中，所述客戶端緩存所述多個子圖片的方式為基于所述子圖片的資源大小確定的；所述客戶端執(zhí)行所述圖片加載操作的方式為基于所加載的圖片的資源大小確定的。

53、本技術(shù)第四方面提供了又一種圖片加載裝置，該裝置包括：

54、圖片上傳模塊，用于向服務(wù)端上傳圖片，以使所述服務(wù)端根據(jù)所述圖片的資源大小所屬的資源量區(qū)間，以及多種資源量區(qū)間與類別的對應(yīng)關(guān)系，對所述圖片進(jìn)行分類；

55、圖片緩存模塊，用于接收所述服務(wù)端對所述圖片的分類結(jié)果，若所述圖片為第一類別，緩存所述圖片經(jīng)過所述服務(wù)端自動裁切后生成的子圖片；其中，緩存所述子圖片的方式為基于所述子圖片的資源大小確定的；所述第一類別為最大的資源量區(qū)間對應(yīng)的圖片類別；

56、圖片加載模塊，用于基于緩存的多個子圖片執(zhí)行圖片加載操作；其中，所述圖片加載操作的方式為基于所加載的圖片的資源大小確定的。

57、相較于現(xiàn)有技術(shù)，本技術(shù)具有以下有益效果：

58、服務(wù)端接收到圖片之后，首先根據(jù)圖片的資源大小將其分類，然后根據(jù)類別對圖片做出相應(yīng)的處理，并將原始圖片以及處理后的圖片發(fā)送回客戶端進(jìn)行緩存和加載。根據(jù)實際情況對圖片大小進(jìn)行分類，對不同類別的圖片采取例如自動裁切、壓縮等不同的優(yōu)化措施，并對圖片及其優(yōu)化后的圖片進(jìn)行相應(yīng)的緩存和加載，均衡圖片優(yōu)化代價和提升圖片加載性能，同時可以更有效地管理存儲空間，提高資源利用率；將大資源圖片自動裁切為多個子圖片進(jìn)行緩存和加載，能夠在保持圖片高精度的情況下，簡化大資源圖片的處理過程，并通過相應(yīng)的緩存方式和加載方式提升了圖片加載的流暢性，提升用戶體驗。