一种基于移动终端的webview的跨平台图片缓存实现方法技术

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

【技术实现步骤摘要】
一种基于移动终端的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的跨平台图片缓存实现方法在用户有图片加载需求时，通过对该需求中包含的图片信息进行分析，以预设的算法对其进行命名，并优先查看本地已缓存的图片中是否有用户需求加载的图片，若有则直接调用本地图片以供用户查看，从而减少加载图片时用户的等待时间，同时，可减少页面的负担，间接帮助加快用户同时发出的其他请求的响应时间，有利于优化页面性能，提升用户的使用满意度。附图说明图1是实施例的图片缓存实现方法的流程示意图。具体实施方式下面，结合附图1，对本专利技术的一种基于移动终端的webview的跨平台图片缓存实现方法进行详细说明。如图1所示，一种基于移动终端的webview的跨平台图片缓存实现方法，在用户有图片加载需求时，通过对该需求中包含的图片信息进行分析，以预设的算法对其进行命名，并优先查看本地已缓存的图片中是否有用户需求加载的图片，若有则直接调用本地图片以供用户查看，可有效减少加载图片时用户的等待时间，当把本专利技术的图片缓存实现方法应用于基于Android或IOS移动终端中时，主要包含以下步骤：步骤101，用户通过Android或IOS移动终端的webview发出加载相应html5页面的加载请求，其中，webview是跨平台混合开发模式下用于加载显示相应html5页面的原生控件，html5页面为本地静态资源或网络服务页面；步骤102，html5页面的业务逻辑单元获取加载请求中的数据信息，同时通过img标签加载相应网络图片地址；步骤103，移动终端的webview拦截当前html5页面的加载请求，实际中，可设定为直接拦截html5页面的img标签的图片加载请求，也可设定为移动终端的webview拦截当前html5页面的所有网络请求，移动终端的webview再对拦截的所有网络请求进行过滤筛选，最后仅保留对图片加载请求的拦截撤销对其余请求的拦截；步骤104，移动终端的webview获取拦截到加载请求中的网络图片地址，并根据获取到的网络图片地址生成基于md5算法得到的具有md5值的图片文件名，实际中也可选用其他合适的算法并生成该算法值的图片文件名，只要满足便于后续缓存成图片到本地时的图片命名及后续的对比查找即可。步骤105，移动终端的webview参照得到的具有md5值的图片文件名，对移动终端的本地图片缓存目录进行检索，判断是否存在相同的md5值的图片文件名的图片，若有则进入步骤106，否则，进入步骤107；步骤106，移动终端的webview撤回被拦截的加载请求，并停止请求网络图片资源，获取具有该md5值的图片文件名的图片的本地地址路径，从而使得html5页面的对应img标签显示根据该路径获取到本地缓存图片并进入步骤108；步骤107，移动终端的webview撤销对该加载请求的拦截，并继续请求对应的网络图片资源，再通过html页面对应img标签获取请求到的网络图片资源；移动终端的webview将请求到的图片资源缓存到移动终端中本地图片缓存目录，并以步骤104中得到的md5值对该图片资源命名，同时，进入步骤108；步骤108，html页面显示获取到的图片资源，以供用户查看。可以理解的是，以上实施方式仅仅是为了说明本专利技术的原理而采用的示例性实施方式，然而本专利技术并不局限于此本文档来自技高网...

【技术保护点】
一种基于移动终端的webview的跨平台图片缓存实现方法，其特征在于，包括以下步骤：A.用户通过移动终端的webview发出加载相应html5页面的加载请求；B.html5页面的业务逻辑单元获取所述加载请求中的数据信息，同时通过img标签加载相应网络图片地址；C.移动终端的webview拦截当前html5页面所述加载请求；D.移动终端的webview获取拦截到加载请求中的网络图片地址，并根据获取到的网络图片地址生成基于预设算法得到的具有算法值的图片文件名；E.移动终端的webview参照得到的所述具有算法值的图片文件名，对移动终端的本地图片缓存目录进行检索，判断是否存在相同的所述具有算法值的图片文件名的图片；F.若判断存在相同的所述具有算法值的图片文件名的图片则进入步骤G，否则进入步骤H；G.移动终端的webview停止请求网络图片资源，并获取步骤D中生成的所述具有算法值的图片文件名的本地地址路径，html5页面的对应img标签显示根据该本地地址路径获取的本地缓存图片；H.移动终端的webview撤销对步骤C中的所述加载请求的拦截，并继续请求对应的网络图片资源，再通过html页面对应img标签显示请求到的网络图片资源；移动终端的webview将请求到的图片资源缓存到移动终端中所述本地图片缓存目录，并以步骤E中得到的所述具有算法值的图片文件名对该图片资源命名。...

【技术特征摘要】
1.一种基于移动终端的webview的跨平台图片缓存实现方法，其特征在于，包括以下步骤：A.用户通过移动终端的webview发出加载相应html5页面的加载请求；B.html5页面的业务逻辑单元获取所述加载请求中的数据信息，同时通过img标签加载相应网络图片地址；C.移动终端的webview拦截当前html5页面所述加载请求；D.移动终端的webview获取拦截到加载请求中的网络图片地址，并根据获取到的网络图片地址生成基于预设算法得到的具有算法值的图片文件名；E.移动终端的webview参照得到的所述具有算法值的图片文件名，对移动终端的本地图片缓存目录进行检索，判断是否存在相同的所述具有算法值的图片文件名的图片；F.若判断存在相同的所述具有算法值的图片文件名的图片则进入步骤G，否则进入步骤H；G.移动终端的webview停止请求网络图片资源，并获取步骤D中生成的所述具有算法值的图片文件名的本地地址路径，html5页面的对应img标签显示根据该本地地址路径获取的本地缓存图片；H.移动终端的webview撤销对步骤C中的所述加载请求的拦截，并继续请求对应的网络图片资源，再通过html页面对应img标签显示请求到的网络图片资源；移动终端的we...

【专利技术属性】
技术研发人员：廖金，
申请(专利权)人：四川长虹电器股份有限公司，
类型：发明
国别省市：四川,51