[发明专利]一种基于移动终端的webview的跨平台图片缓存实现方法

说明书

技术领域

本发明涉及技术图片缓存领域，特别涉及一种基于移动终端的webview的跨平台图片缓存实现方法。

背景技术

近年来，随着移动终端领域的快速发展以及企业对app产品开发速度及迭代速度的高要求，基于html5的混合开发模式嫣然成为各大企业重点研究及发展方向，目前包括手机淘宝、京东、支付宝、携程等各类主流app都不同程度的采用了混合开发模式。而html5页面的图片加载及缓存一直是混合开发模式下的疑难点。

传统跨平台混合开发模式下的html5页面显示图片时，每次都需加载网络地址图片，这样每次大量网络图片请求极易造成页面负担过重，导致页面加载性能差，且图片量大网速慢的条件下也容易使页面图片迟迟加载不全，造成极差的用户体验。因此解决跨平台图片缓存问题对于app用户体验及页面性能的提升已显得格外重要。

发明内容

本发明的目的是克服上述背景技术中不足，提供一种基于移动终端的webview的跨平台图片缓存实现方法，解决了移动端跨平台开发的图片缓存问题。

为了达到上述的技术效果，本发明采取以下技术方案：

一种基于移动终端的webview的跨平台图片缓存实现方法，包括以下步骤：

A.用户通过移动终端的webview发出加载相应html5页面的加载请求，其中，webview是跨平台混合开发模式下用于加载显示相应html5页面的原生控件，html5页面为本地静态资源或网络服务页面；

B.html5页面的业务逻辑单元获取所述加载请求中的数据信息，同时通过img标签加载相应网络图片地址；

C.移动终端的webview拦截当前html5页面所述加载请求；

D.移动终端的webview获取拦截到加载请求中的网络图片地址，并根据获取到的网络图片地址生成基于预设算法得到的具有算法值的图片文件名，其中，该具有算法值的图片文件名为用于后续缓存成图片的文件名及用于查找对比的图片文件名；

E.移动终端的webview参照得到的所述具有算法值的图片文件名，对移动终端的本地图片缓存目录进行检索，判断是否存在相同的所述具有算法值的图片文件名的图片；

F.若判断存在相同的所述具有算法值的图片文件名的图片则进入步骤G，否则进入步骤H；

G.移动终端的webview撤回步骤C中拦截的所述加载请求，停止请求网络图片资源，获取步骤D中生成的所述具有算法值的图片文件名的本地地址路径，html5页面的对应img标签显示根据该本地地址路径获取的本地缓存图片；

H.移动终端的webview撤销对步骤C中的所述加载请求的拦截，并继续请求对应的网络图片资源，再通过html页面对应img标签显示请求到的网络图片资源；移动终端的webview将请求到的图片资源缓存到移动终端中所述本地图片缓存目录，并以步骤E中得到的所述具有算法值的图片文件名对该图片资源命名。

进一步地，所述步骤C中移动终端的webview拦截当前html5页面的所述加载请求时，仅拦截html5页面的img标签的图片加载请求。

进一步地，所述步骤C中移动终端的webview拦截当前html5页面的所述加载请求时，具体包括以下步骤：

C1.移动终端的webview拦截当前html5页面的所有网络请求；

C2.移动终端的webview对拦截的所有网络请求进行过滤筛选，仅保留对图片加载请求的拦截撤销对其余请求的拦截。

进一步地，所述步骤D中，所述预设算法为md5算法，所述具有算法值的图片文件名为md5值图片文件名，实际中也可选用其他合适的算法并生成该算法值的图片文件名，只要满足便于后续缓存成图片到本地时的图片命名及后续的对比查找即可，其中，md5算法为一种消息摘要算法。

进一步地，所述移动终端为嵌有Android系统和/或IOS系统的移动终端，该基于移动终端跨平台的图片缓存实现方法可同时满足操作系统为Android系统的移动终端和操作系统为IOS系统的移动终端的使用。

本发明与现有技术相比，具有以下有益效果为：

本发明的一种基于移动终端的webview的跨平台图片缓存实现方法在用户有图片加载需求时，通过对该需求中包含的图片信息进行分析，以预设的算法对其进行命名，并优先查看本地已缓存的图片中是否有用户需求加载的图片，若有则直接调用本地图片以供用户查看，从而减少加载图片时用户的等待时间，同时，可减少页面的负担，间接帮助加快用户同时发出的其他请求的响应时间，有利于优化页面性能，提升用户的使用满意度。