本發(fā)明涉及互聯(lián)網(wǎng)應用開發(fā)技術(shù)領(lǐng)域，具體而言，涉及一種網(wǎng)絡圖片展示方法、裝置和電子終端。

背景技術(shù)：

在ios等系統(tǒng)開發(fā)中經(jīng)常遇到需要對網(wǎng)絡圖片進行圓角等參數(shù)繪制的情況，通常采用的繪制方法主要包括兩種，一種是在每個圖片視圖中直接采用ios等系統(tǒng)提供的圓角方法來繪制，但此種方法可能會導致離屏渲染等問題出現(xiàn)，加之，如果在同一圖片視圖中存在大量圓角的子視圖將會引發(fā)嚴重性能問題，進而導致界面滑動不流暢，用戶體驗差。另一種常用方法是提供一張中間透明的固定圓角蒙版圖，該方法雖不會觸發(fā)離屏渲染，但每次需要將蒙版圖加入到工程里，而且針對不同半徑的圓角則需要不同蒙版圖，處理過程相對較為麻煩。因此，針對現(xiàn)有技術(shù)中存在的問題，如何簡化網(wǎng)絡圖片的圓角等參數(shù)繪制流程，同時又不會造成離屏渲染的問題出現(xiàn)，已成為本領(lǐng)域技術(shù)人員急需解決的技術(shù)問題。

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

有鑒于此，本發(fā)明實施例提供一種網(wǎng)絡圖片展示方法、裝置和電子終端，能有效解決上述問題，同時還能節(jié)約網(wǎng)絡圖片展示過程中的線程開銷，避免電子終端中內(nèi)存持續(xù)增長而無法及時釋放的問題。

本發(fā)明較佳實施例提供一種網(wǎng)絡圖片展示方法，應用于基于sdwebimage框架的電子終端，所述方法包括：

創(chuàng)建包括key的圖片視圖并調(diào)用圖片下載函數(shù)以下載網(wǎng)絡圖片；

讀取所述圖片視圖中的key并根據(jù)所述key中的圖片繪制參數(shù)對下載完成的網(wǎng)絡圖片進行繪制；

對完成繪制的網(wǎng)絡圖片進行解碼并通過所述圖片視圖進行展示。

在本發(fā)明較佳實施例的選擇中，所述方法還包括：

根據(jù)所述sdwebimage框架下的網(wǎng)絡圖片緩存方式將完成繪制的網(wǎng)絡圖片緩存至所述電子終端中的內(nèi)存和硬盤中。

在本發(fā)明較佳實施例的選擇中，所述圖片視圖的key通過以下步驟生成：

讀取所述圖片視圖的url，并將網(wǎng)絡圖片的圖片繪制參數(shù)以前綴的形式拼接至所述url以生成所述圖片視圖的key。

在本發(fā)明較佳實施例的選擇中，在調(diào)用圖片下載函數(shù)以下載網(wǎng)絡圖片的步驟之前，所述方法還包括：

根據(jù)所述key中的圖片視圖的url查找所述內(nèi)存中是否緩存有所述網(wǎng)絡圖片；

若所述內(nèi)存中緩存有所述網(wǎng)絡圖片，則直接回調(diào)該網(wǎng)絡圖片并通過所述圖片視圖進行展示；

若所述內(nèi)存中未緩存有所述網(wǎng)絡圖片，則執(zhí)行調(diào)用圖片下載函數(shù)以下載網(wǎng)絡圖片的步驟。

在本發(fā)明較佳實施例的選擇中，若所述內(nèi)存中未緩存有所述網(wǎng)絡圖片，所述方法還包括：

根據(jù)所述key中的圖片視圖的url繼續(xù)查找所述硬盤中是否保存有所述網(wǎng)絡圖片；

若所述硬盤中保存有所述網(wǎng)絡圖片，則直接回調(diào)該網(wǎng)絡圖片并通過所述圖片視圖進行展示；

若所述硬盤中未保存有所述網(wǎng)絡圖片，則執(zhí)行調(diào)用圖片下載函數(shù)以下載網(wǎng)絡圖片的步驟。

本發(fā)明較佳實施例還提供一種網(wǎng)絡圖片展示裝置，應用于基于sdwebimage框架的電子終端，所述裝置包括：

視圖創(chuàng)建模塊，用于創(chuàng)建包括key的圖片視圖并調(diào)用圖片下載函數(shù)以下載網(wǎng)絡圖片；

參數(shù)繪制模塊，用于讀取所述圖片視圖中的key并根據(jù)所述key中的圖片繪制參數(shù)對下載完成的網(wǎng)絡圖片進行繪制；

圖片展示模塊，用于對完成繪制的網(wǎng)絡圖片進行解碼并通過所述圖片視圖進行展示。

在本發(fā)明較佳實施例的選擇中，所述裝置還包括：

圖片緩存模塊，用于根據(jù)所述sdwebimage框架下的網(wǎng)絡圖片緩存方式將完成繪制的網(wǎng)絡圖片緩存至所述電子終端中的內(nèi)存和硬盤中。

在本發(fā)明較佳實施例的選擇中，所述參數(shù)繪制模塊包括：

key生成單元，用于讀取所述圖片視圖的url，并將網(wǎng)絡圖片的圖片繪制參數(shù)以前綴的形式拼接至所述url以生成所述圖片視圖的key。

本發(fā)明較佳實施例還提供一種電子終端，基于reactnative平臺實現(xiàn)，所述電子終端包括存儲器、處理器及上述的網(wǎng)絡圖片展示裝置，所述網(wǎng)絡圖片展示裝置安裝于所述存儲器并包括一個或多個由所述處理器執(zhí)行的軟件功能模塊。

本發(fā)明較佳實施例還提供一種計算機可讀存儲介質(zhì)，其上存儲有計算機程序，所述計算機程序在執(zhí)行時實現(xiàn)上述的網(wǎng)絡圖片展示方法中的步驟。

與現(xiàn)有技術(shù)相比，本發(fā)明在sdwebimage框架加載并展示網(wǎng)絡圖片的過程中，對下載完成后的網(wǎng)絡圖片直接進行繪制處理后再進行解碼展示，從而能夠避免增加額外的線程開銷，以及電子終端中內(nèi)存持續(xù)增大而無法有效釋放的問題。

除此之外，本發(fā)明能夠有效避免電子終端運行卡頓、不流暢的問題出現(xiàn)，改善用戶體驗。

附圖說明

為了更清楚地說明本發(fā)明實施例的技術(shù)方案，下面將對實施例中所需要使用的附圖作簡單地介紹，應當理解，以下附圖僅示出了本發(fā)明的某些實施例，因此不應被看作是對范圍的限定，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)這些附圖獲得其他相關(guān)的附圖。

圖1為本發(fā)明實施例提供的網(wǎng)絡圖片展示方法和裝置的應用場景示意圖。

圖2為圖1中所示的電子終端的方框示意圖。

圖3為本發(fā)明實施例提供的網(wǎng)絡圖片展示方法的流程示意圖。

圖4為本發(fā)明實施例提供的網(wǎng)絡圖片展示裝置的方框結(jié)構(gòu)示意圖。

圖標：10-電子終端；100-網(wǎng)絡圖片展示裝置；110-視圖創(chuàng)建模塊；120-參數(shù)繪制模塊；130-圖片展示模塊；140-圖片緩存模塊；200-存儲器；300-存儲控制器；400-處理器；20-網(wǎng)絡；30-服務器。

具體實施方式

為使本發(fā)明實施例的目的、技術(shù)方案和優(yōu)點更加清楚，下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進行清楚、完整地描述，顯然，所描述的實施例是本發(fā)明一部分實施例，而不是全部的實施例。通常在此處附圖中描述和示出的本發(fā)明實施例的組件可以以各種不同的配置來布置和設(shè)計。

因此，以下對在附圖中提供的本發(fā)明的實施例的詳細描述并非旨在限制要求保護的本發(fā)明的范圍，而是僅僅表示本發(fā)明的選定實施例。基于本發(fā)明中的實施例，本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護的范圍。

應注意到：相似的標號和字母在下面的附圖中表示類似項，因此，一旦某一項在一個附圖中被定義，則在隨后的附圖中不需要對其進行進一步定義和解釋。

如圖1所示，是本發(fā)明實施例提供的一種網(wǎng)絡圖片展示方法和裝置的應用場景示意圖。該應用場景可以包括電子終端10、網(wǎng)絡20和服務器30，其中，電子終端10可以為多個。所述服務器30與多個所述電子終端10之間可通過所述網(wǎng)絡20實現(xiàn)彼此之間的通信連接。

可選地，所述電子終端10可以是，但不限于，智能手機、個人電腦(personalcomputer，pc)、平板電腦、個人數(shù)字助理(personaldigitalassistant，pda)、移動上網(wǎng)設(shè)備(mobileinternetdevice，mid)等。所述網(wǎng)絡20可以是，但不限于，有線網(wǎng)絡或無線網(wǎng)絡。所述服務器30可以是，但不限于，web(網(wǎng)站)服務器、數(shù)據(jù)服務器等，還可以是電腦、移動上網(wǎng)設(shè)備(mobileinternetdevice，mid)等具有處理功能的電子設(shè)備。

進一步地，所述電子終端10包括網(wǎng)絡圖片展示裝置100、存儲器200、存儲控制器300以及處理器400。其中，所述存儲器200、存儲控制器300、處理器400各元件相互之間直接或間接地電性連接，以實現(xiàn)數(shù)據(jù)的傳輸或交互。例如，這些元件之間通過一條或多條通訊總線或信號線實現(xiàn)電性連接。所述網(wǎng)絡圖片展示裝置100包括至少一個可以軟件或固件的形式存儲于所述存儲器200中或固化在所述電子終端10的操作系統(tǒng)中的軟件功能模塊。所述處理器400在所述存儲控制器300的控制下訪問所述存儲器200，以用于執(zhí)行所述存儲器200中存儲的可執(zhí)行模塊，例如所述網(wǎng)絡圖片展示裝置100所包括的軟件功能模塊及計算機程序等。

可以理解，圖2所示的結(jié)構(gòu)僅為示意，所述電子終端10還可包括比圖2中所示更多或者更少的組件，或者具有與圖2所示不同的配置。圖2中所示的各組件可以采用硬件、軟件或其組合實現(xiàn)。

請結(jié)合參閱圖3，本發(fā)明實施例還提供一種可應用于基于sdwebimage框架的電子終端10的網(wǎng)絡圖片展示方法，所述方法有關(guān)的流程所定義的方法步驟可以由所述處理器400實現(xiàn)。下面將對圖3所示的具體流程進行詳細闡述。

步驟s110，創(chuàng)建包括key的圖片視圖。

首先需要說明的是，所述sdwebimage框架是目前ios系統(tǒng)開發(fā)人員常用的第三方圖片處理框架，能夠?qū)崿F(xiàn)圖片的異步加載和顯示。同時，該sdwebimage框架中設(shè)置有圖片緩存策略。具體地，在調(diào)用該sdwebimage框架進行圖片處理時，入口setimagewithurl:placeholderimage:options:會先把placeholderimage顯示，然后函數(shù)sdwebimagemanager根據(jù)所述圖片視圖的key開始處理圖片。應注意，本實施例所述的圖片視圖的key通過以下步驟實現(xiàn)。

(1)創(chuàng)建圖片視圖uiimageview。由于每個需要加載網(wǎng)絡圖片的圖片視圖uiimageview都會有對應的url，其中，所述圖片視圖的url也是作為從緩存中查找對應的緩存對象的方式。

(2)生成所述圖片視圖的key。所述圖片視圖的key由該圖片視圖的url和圖片繪制參數(shù)拼接而成。例如，通過調(diào)用cachekeyfilter將所述圖片繪制參數(shù)轉(zhuǎn)換成字符串，然后以前綴的形式拼接至所述圖片視圖的url，其中，所述圖片繪制參數(shù)包括圓角半徑radius、圖片尺寸等。應理解，所述key中的圖片繪制參數(shù)可以為空。

本實施例中，所述包括key的圖片視圖的創(chuàng)建方法無需寫子類，而是直接調(diào)用基類即可實現(xiàn)網(wǎng)絡圖片的繪制、處理，實現(xiàn)方便。

步驟s120，根據(jù)key中的圖片視圖的url查找內(nèi)存中是否緩存有網(wǎng)絡圖片，若所述內(nèi)存中未緩存有所述網(wǎng)絡圖片，則執(zhí)行步驟s130，反之，則執(zhí)行步驟s140。

步驟s130，直接回調(diào)該網(wǎng)絡圖片并通過圖片視圖進行展示。

本實施例中，在得到所述包括key的圖片視圖后，對所述key進行解析以得到所述圖片視圖的url，再根據(jù)所述圖片視圖的url先從所述電子終端10的內(nèi)存中查找是否緩存有對應的網(wǎng)絡圖片，若有，則直接回調(diào)該網(wǎng)絡圖片，并通過所述圖片視圖進行展示。

例如，首先通過函數(shù)sdimagecachedelegate回調(diào)imagecache:didfindimage:forkey:userinfo:到函數(shù)sdwebimagemanager；再通過函數(shù)sdwebimagemanagerdelegate回調(diào)webimagemanager:didfinishwithimage:到uiimageview+webcache等前端展示所述網(wǎng)絡圖片。

步驟s140，根據(jù)key中的圖片視圖的url繼續(xù)查找硬盤中是否保存有網(wǎng)絡圖片，若所述硬盤中保存有所述網(wǎng)絡圖片，則執(zhí)行步驟s150，反之，則執(zhí)行步驟s160。

步驟s150，直接回調(diào)該網(wǎng)絡圖片并通過圖片視圖進行展示。

具體地，如果所述電子終端10的內(nèi)存中未緩存有所述網(wǎng)絡圖片，則生成函數(shù)nsinvocationoperation添加到隊列，以查找硬盤中是否緩存有所述網(wǎng)絡圖片。

其中，在根據(jù)圖片視圖的url在硬盤緩存目錄下嘗試讀取對應的圖片文件時，如果該操作從硬盤讀取到了所述網(wǎng)絡圖片，那么將該網(wǎng)絡圖片添加到內(nèi)存緩存中，再回調(diào)并通過所述圖片視圖進行展示。例如，可通過函數(shù)sdimagecachedelegate回調(diào)imagecache:didfindimage:forkey:userinfo:實現(xiàn)。應注意，在將所述網(wǎng)絡圖片添加到所述內(nèi)存緩存時，如果內(nèi)存過小，可先清空內(nèi)存再進行緩存。

步驟s160，調(diào)用圖片下載函數(shù)以下載網(wǎng)絡圖片。

具體地，如果從所述硬盤的緩存目錄中也未讀取到所述網(wǎng)絡圖片，則說明所述電子終端10的所有緩存中均不存在所述網(wǎng)絡圖片，則需要對該網(wǎng)絡圖片進行下載，具體過程如下。

首先回調(diào)imagecache:didnotfindimageforkey:userinfo:，共享或重新生成一個下載器sdwebimagedownloader開始下載網(wǎng)絡圖片。其中，網(wǎng)絡圖片下載由nsurlconnection來做，實現(xiàn)相關(guān)delegate來判斷該網(wǎng)絡圖片具體下載進程，如下載中、下載完成和下載失敗等。

步驟s170，讀取圖片視圖中的key并根據(jù)key中的圖片繪制參數(shù)對下載完成的網(wǎng)絡圖片進行繪制。

具體地，在完成所述網(wǎng)絡圖片的下載時，對所述圖片視圖中的key進行解析，判斷該key中是否包含有圖片繪制參數(shù)的前綴字符串，若有，則根據(jù)所述key中圖片繪制參數(shù)對所述網(wǎng)絡圖片進行繪制。應注意，若所述key中未包含圖片繪制參數(shù)，則直接根據(jù)系統(tǒng)中默認的圖片處理方式對網(wǎng)絡圖片進行處理即可。

本實施例中，在下載完成的網(wǎng)絡圖片實現(xiàn)參數(shù)繪制時，由于該繪制過程還在下載的子線程中，因此，整個網(wǎng)絡圖片的繪制過程無需額外的線程開銷，也無需在主線程去處理，避免了主線程卡頓、不流暢的現(xiàn)象發(fā)生。

步驟s180，對完成繪制的網(wǎng)絡圖片進行解碼并通過圖片視圖進行展示。

具體地，在完成網(wǎng)絡圖片的繪制后，將其交給sdwebimagedecoder做圖片解碼處理。圖片解碼處理通過函數(shù)nsoperationqueue完成，可避免拖慢主線程ui，并在主線程notifydelegateonmainthreadwithinfo:宣告解碼完成時，通過函數(shù)imagedecoder:didfinishdecodingimage:userinfo:回調(diào)給sdwebimagedownloader。再通過imagedownloader:didfinishwithimage:回調(diào)給函數(shù)sdwebimagemanager以告知其網(wǎng)絡圖片下載完成，接著通知所有的downloaddelegates下載完成，最后將解碼后的網(wǎng)絡圖片通過所述圖片視圖進行展示。

步驟s190，根據(jù)sdwebimage框架下的網(wǎng)絡圖片緩存方式將完成繪制的網(wǎng)絡圖片緩存至電子終端10中的內(nèi)存和硬盤中。

具體地，將完成繪制的網(wǎng)絡圖片保存到sdimagecache中，其中，內(nèi)存緩存和硬盤緩存同時保存。應注意，將該網(wǎng)絡圖片文件寫入硬盤時，可以通過函數(shù)nsinvocationoperation單獨完成，從而避免拖慢主線程。

應注意，通過對完成繪制的網(wǎng)絡圖片進行緩存后，便于后續(xù)直接調(diào)用而無需再次對該網(wǎng)絡圖片再次進行處理，即便是需要調(diào)用原始未經(jīng)繪制的網(wǎng)絡圖片，也可通過不同的cachekey進行調(diào)用。

進一步地，基于上述描述，本發(fā)明實施例還提供一種計算機可讀存儲介質(zhì)，其上存儲有計算機程序，計算機程序在執(zhí)行時實現(xiàn)上述圖3對應的方法實施例中描述的各個步驟。

請結(jié)合參閱圖4，本發(fā)明實施例還提供一種可應用于所述電子終端10的網(wǎng)絡圖片展示裝置100。所述網(wǎng)絡圖片展示裝置100包括視圖創(chuàng)建模塊110、參數(shù)繪制模塊120、圖片展示模塊130和圖片緩存模塊140。

所述視圖創(chuàng)建模塊110，用于創(chuàng)建包括key的圖片視圖并調(diào)用圖片下載函數(shù)以下載網(wǎng)絡圖片。具體地，在本實施例中，所述視圖創(chuàng)建模塊110可用于執(zhí)行圖3中的步驟s110和步驟s160，具體的操作方法可參考步驟s110或步驟s160的詳細描述。

可選地，所述視圖創(chuàng)建模塊110還包括key生成單元。所述key生成單元，用于讀取所述圖片視圖的url，并將網(wǎng)絡圖片的圖片繪制參數(shù)以前綴的形式拼接至所述url以生成所述圖片視圖的key。

所述參數(shù)繪制模塊120，用于讀取所述圖片視圖中的key并根據(jù)所述key中的圖片繪制參數(shù)對下載完成的網(wǎng)絡圖片進行繪制。具體地，在本實施例中，所述參數(shù)繪制模塊120可用于執(zhí)行圖3中的步驟s170，具體的操作方法可參考步驟s170的詳細描述。

所述圖片展示模塊130，用于對完成繪制的網(wǎng)絡圖片進行解碼并通過所述圖片視圖進行展示。具體地，在本實施例中，所述圖片展示模塊130可用于執(zhí)行圖3中的步驟s180，具體的操作方法可參考步驟s180的詳細描述。

所述圖片緩存模塊140，用于根據(jù)所述sdwebimage框架下的網(wǎng)絡圖片緩存方式將完成繪制的網(wǎng)絡圖片緩存至所述電子終端10中的內(nèi)存和硬盤中。具體地，在本實施例中，所述圖片緩存模塊140可用于執(zhí)行圖3中的步驟s190，具體的操作方法可參考步驟s190的詳細描述。

綜上所述，本發(fā)明實施例提供的網(wǎng)絡圖片繪制方法、裝置和電子終端10，通過在sdwebimage框架進行網(wǎng)絡圖片下載的子線程中對下載的網(wǎng)絡圖片進行繪制，從而能夠有效避免增加額外的線程開銷以及內(nèi)存持續(xù)增長無法及時釋放的問題。緩解主線程運行卡頓不流暢的現(xiàn)象，改善了用戶體驗。

除此之外，本發(fā)明還能夠緩解sdwebimage框架在進行圖片處理時易出現(xiàn)主線程卡頓、不流暢的現(xiàn)象，改善了用戶體驗，且該方法簡單，適用性強。

在本發(fā)明的描述中，術(shù)語“設(shè)置”、“相連”、“連接”應做廣義理解，例如，可以是固定連接，也可以是可拆卸連接，或一體地連接；可以是機械連接，也可以是電連接；可以是直接相連，也可以通過中間媒介間接相連，可以是兩個元件內(nèi)部的連通。對于本領(lǐng)域的普通技術(shù)人員而言，可以具體情況理解上述術(shù)語在本發(fā)明中的具體含義。

在本發(fā)明實施例所提供的幾個實施例中，應該理解到，所揭露的裝置和方法，也可以通過其他方式實現(xiàn)。以上所描述的裝置和方法實施例僅僅是示意性的，例如，附圖中的流程圖和框圖顯示了根據(jù)本發(fā)明的預設(shè)數(shù)量個實施例的裝置、方法和計算機程序產(chǎn)品可能實現(xiàn)的體系架構(gòu)、功能和操作。在這點上，流程圖或框圖中的每個方框可以代表一個模塊、程序段或代碼的一部分。所述模塊、程序段或代碼的一部分包含一個或預設(shè)數(shù)量個用于實現(xiàn)規(guī)定的邏輯功能。

也應當注意，在有些作為替換的實現(xiàn)方式中，方框中所標注的功能也可以以不同于附圖中所標注的順序發(fā)生。例如，兩個連續(xù)的方框?qū)嶋H上可以基本并行地執(zhí)行，它們有時也可以按相反的順序執(zhí)行，這依所涉及的功能而定。也要注意的是，框圖和/或流程圖中的每個方框、以及框圖和/或流程圖中的方框的組合，可以用執(zhí)行規(guī)定的功能或動作的專用的基于硬件的系統(tǒng)來實現(xiàn)，或者可以用專用硬件與計算機指令的組合來實現(xiàn)。

以上所述僅為本發(fā)明的優(yōu)選實施例而已，并不用于限制本發(fā)明，對于本領(lǐng)域的技術(shù)人員來說，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進等，均應包含在本發(fā)明的保護范圍之內(nèi)。