本發(fā)明涉及技術圖片緩存領域，特別涉及一種基于移動終端的webview的跨平臺圖片緩存實現方法。

背景技術：

近年來，隨著移動終端領域的快速發(fā)展以及企業(yè)對app產品開發(fā)速度及迭代速度的高要求，基于html5的混合開發(fā)模式嫣然成為各大企業(yè)重點研究及發(fā)展方向，目前包括手機淘寶、京東、支付寶、攜程等各類主流app都不同程度的采用了混合開發(fā)模式。而html5頁面的圖片加載及緩存一直是混合開發(fā)模式下的疑難點。

傳統跨平臺混合開發(fā)模式下的html5頁面顯示圖片時，每次都需加載網絡地址圖片，這樣每次大量網絡圖片請求極易造成頁面負擔過重，導致頁面加載性能差，且圖片量大網速慢的條件下也容易使頁面圖片遲遲加載不全，造成極差的用戶體驗。因此解決跨平臺圖片緩存問題對于app用戶體驗及頁面性能的提升已顯得格外重要。

技術實現要素：

本發(fā)明的目的是克服上述背景技術中不足，提供一種基于移動終端的webview的跨平臺圖片緩存實現方法，解決了移動端跨平臺開發(fā)的圖片緩存問題。

為了達到上述的技術效果，本發(fā)明采取以下技術方案：

一種基于移動終端的webview的跨平臺圖片緩存實現方法，包括以下步驟：

a.用戶通過移動終端的webview發(fā)出加載相應html5頁面的加載請求，其中，webview是跨平臺混合開發(fā)模式下用于加載顯示相應html5頁面的原生控件，html5頁面為本地靜態(tài)資源或網絡服務頁面；

b.html5頁面的業(yè)務邏輯單元獲取所述加載請求中的數據信息，同時通過img標簽加載相應網絡圖片地址；

c.移動終端的webview攔截當前html5頁面所述加載請求；

d.移動終端的webview獲取攔截到加載請求中的網絡圖片地址，并根據獲取到的網絡圖片地址生成基于預設算法得到的具有算法值的圖片文件名，其中，該具有算法值的圖片文件名為用于后續(xù)緩存成圖片的文件名及用于查找對比的圖片文件名；

e.移動終端的webview參照得到的所述具有算法值的圖片文件名，對移動終端的本地圖片緩存目錄進行檢索，判斷是否存在相同的所述具有算法值的圖片文件名的圖片；

f.若判斷存在相同的所述具有算法值的圖片文件名的圖片則進入步驟g，否則進入步驟h；

g.移動終端的webview撤回步驟c中攔截的所述加載請求，停止請求網絡圖片資源，獲取步驟d中生成的所述具有算法值的圖片文件名的本地地址路徑，html5頁面的對應img標簽顯示根據該本地地址路徑獲取的本地緩存圖片；

h.移動終端的webview撤銷對步驟c中的所述加載請求的攔截，并繼續(xù)請求對應的網絡圖片資源，再通過html頁面對應img標簽顯示請求到的網絡圖片資源；移動終端的webview將請求到的圖片資源緩存到移動終端中所述本地圖片緩存目錄，并以步驟e中得到的所述具有算法值的圖片文件名對該圖片資源命名。

進一步地，所述步驟c中移動終端的webview攔截當前html5頁面的所述加載請求時，僅攔截html5頁面的img標簽的圖片加載請求。

進一步地，所述步驟c中移動終端的webview攔截當前html5頁面的所述加載請求時，具體包括以下步驟：

c1.移動終端的webview攔截當前html5頁面的所有網絡請求；

c2.移動終端的webview對攔截的所有網絡請求進行過濾篩選，僅保留對圖片加載請求的攔截撤銷對其余請求的攔截。

進一步地，所述步驟d中，所述預設算法為md5算法，所述具有算法值的圖片文件名為md5值圖片文件名，實際中也可選用其他合適的算法并生成該算法值的圖片文件名，只要滿足便于后續(xù)緩存成圖片到本地時的圖片命名及后續(xù)的對比查找即可，其中，md5算法為一種消息摘要算法。

進一步地，所述移動終端為嵌有android系統和/或ios系統的移動終端，該基于移動終端跨平臺的圖片緩存實現方法可同時滿足操作系統為android系統的移動終端和操作系統為ios系統的移動終端的使用。

本發(fā)明與現有技術相比，具有以下有益效果為：

本發(fā)明的一種基于移動終端的webview的跨平臺圖片緩存實現方法在用戶有圖片加載需求時，通過對該需求中包含的圖片信息進行分析，以預設的算法對其進行命名，并優(yōu)先查看本地已緩存的圖片中是否有用戶需求加載的圖片，若有則直接調用本地圖片以供用戶查看，從而減少加載圖片時用戶的等待時間，同時，可減少頁面的負擔，間接幫助加快用戶同時發(fā)出的其他請求的響應時間，有利于優(yōu)化頁面性能，提升用戶的使用滿意度。

附圖說明

圖1是實施例的圖片緩存實現方法的流程示意圖。

具體實施方式

下面，結合附圖1，對本發(fā)明的一種基于移動終端的webview的跨平臺圖片緩存實現方法進行詳細說明。

如圖1所示，一種基于移動終端的webview的跨平臺圖片緩存實現方法，在用戶有圖片加載需求時，通過對該需求中包含的圖片信息進行分析，以預設的算法對其進行命名，并優(yōu)先查看本地已緩存的圖片中是否有用戶需求加載的圖片，若有則直接調用本地圖片以供用戶查看，可有效減少加載圖片時用戶的等待時間，當把本發(fā)明的圖片緩存實現方法應用于基于android或ios移動終端中時，主要包含以下步驟：

步驟101，用戶通過android或ios移動終端的webview發(fā)出加載相應html5頁面的加載請求，其中，webview是跨平臺混合開發(fā)模式下用于加載顯示相應html5頁面的原生控件，html5頁面為本地靜態(tài)資源或網絡服務頁面；

步驟102，html5頁面的業(yè)務邏輯單元獲取加載請求中的數據信息，同時通過img標簽加載相應網絡圖片地址；

步驟103，移動終端的webview攔截當前html5頁面的加載請求，實際中，可設定為直接攔截html5頁面的img標簽的圖片加載請求，也可設定為移動終端的webview攔截當前html5頁面的所有網絡請求，移動終端的webview再對攔截的所有網絡請求進行過濾篩選，最后僅保留對圖片加載請求的攔截撤銷對其余請求的攔截；

步驟104，移動終端的webview獲取攔截到加載請求中的網絡圖片地址，并根據獲取到的網絡圖片地址生成基于md5算法得到的具有md5值的圖片文件名，實際中也可選用其他合適的算法并生成該算法值的圖片文件名，只要滿足便于后續(xù)緩存成圖片到本地時的圖片命名及后續(xù)的對比查找即可。

步驟105，移動終端的webview參照得到的具有md5值的圖片文件名，對移動終端的本地圖片緩存目錄進行檢索，判斷是否存在相同的md5值的圖片文件名的圖片，若有則進入步驟106，否則，進入步驟107；

步驟106，移動終端的webview撤回被攔截的加載請求，并停止請求網絡圖片資源，獲取具有該md5值的圖片文件名的圖片的本地地址路徑，從而使得html5頁面的對應img標簽顯示根據該路徑獲取到本地緩存圖片并進入步驟108；

步驟107，移動終端的webview撤銷對該加載請求的攔截，并繼續(xù)請求對應的網絡圖片資源，再通過html頁面對應img標簽獲取請求到的網絡圖片資源；移動終端的webview將請求到的圖片資源緩存到移動終端中本地圖片緩存目錄，并以步驟104中得到的md5值對該圖片資源命名，同時，進入步驟108；

步驟108，html頁面顯示獲取到的圖片資源，以供用戶查看。

可以理解的是，以上實施方式僅僅是為了說明本發(fā)明的原理而采用的示例性實施方式，然而本發(fā)明并不局限于此。對于本領域內的普通技術人員而言，在不脫離本發(fā)明的精神和實質的情況下，可以做出各種變型和改進，這些變型和改進也視為本發(fā)明的保護范圍。