CN107291519A - 一种基于移动终端的webview的跨平台图片缓存实现方法 - Google Patents

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

Info

Publication number
CN107291519A
CN107291519A CN201710676465.2A CN201710676465A CN107291519A CN 107291519 A CN107291519 A CN 107291519A CN 201710676465 A CN201710676465 A CN 201710676465A CN 107291519 A CN107291519 A CN 107291519A
Authority
CN
China
Prior art keywords
mobile terminal
picture
webview
image cache
implementation method
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710676465.2A
Other languages
English (en)
Inventor
廖金
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Sichuan Changhong Electric Co Ltd
Original Assignee
Sichuan Changhong Electric Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Sichuan Changhong Electric Co Ltd filed Critical Sichuan Changhong Electric Co Ltd
Priority to CN201710676465.2A priority Critical patent/CN107291519A/zh
Publication of CN107291519A publication Critical patent/CN107291519A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

一种基于移动终端的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页面显示获取到的图片资源，以供用户查看。
可以理解的是，以上实施方式仅仅是为了说明本发明的原理而采用的示例性实施方式，然而本发明并不局限于此。对于本领域内的普通技术人员而言，在不脱离本发明的精神和实质的情况下，可以做出各种变型和改进，这些变型和改进也视为本发明的保护范围。

Claims (5)

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标签显示请求到的网络图片资源；移动终端的webview将请求到的图片资源缓存到移动终端中所述本地图片缓存目录，并以步骤E中得到的所述具有算法值的图片文件名对该图片资源命名。
2.根据权利要求1所述的一种基于移动终端的webview的跨平台图片缓存实现方法，其特征在于，所述步骤C中移动终端的webview拦截当前html5页面的所述加载请求时，仅拦截html5页面的img标签的图片加载请求。
3.根据权利要求1所述的一种基于移动终端的webview的跨平台图片缓存实现方法，其特征在于，所述步骤C中移动终端的webview拦截当前html5页面的所述加载请求时，具体包括以下步骤：
C1.移动终端的webview拦截当前html5页面的所有网络请求；
C2.移动终端的webview对拦截的所有网络请求进行过滤筛选，仅保留对图片加载请求的拦截撤销对其余请求的拦截。
4.根据权利要求1所述的一种基于移动终端的webview的跨平台图片缓存实现方法，其特征在于，所述步骤D中，所述预设算法为md5算法，所述具有算法值的图片文件名为md5值图片文件名。
5.根据权利要求1所述的一种基于移动终端的webview的跨平台图片缓存实现方法，其特征在于，所述移动终端为嵌有Android系统和/或IOS系统的移动终端。
CN201710676465.2A 2017-08-09 2017-08-09 一种基于移动终端的webview的跨平台图片缓存实现方法 Pending CN107291519A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710676465.2A CN107291519A (zh) 2017-08-09 2017-08-09 一种基于移动终端的webview的跨平台图片缓存实现方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710676465.2A CN107291519A (zh) 2017-08-09 2017-08-09 一种基于移动终端的webview的跨平台图片缓存实现方法

Publications (1)

Publication Number Publication Date
CN107291519A true CN107291519A (zh) 2017-10-24

Family

ID=60104784

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710676465.2A Pending CN107291519A (zh) 2017-08-09 2017-08-09 一种基于移动终端的webview的跨平台图片缓存实现方法

Country Status (1)

Country Link
CN (1) CN107291519A (zh)

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107911456A (zh) * 2017-11-17 2018-04-13 深圳泉眼体育运营管理有限公司 图片加载的流量优化方法、装置、终端设备及存储介质
CN108595235A (zh) * 2018-03-20 2018-09-28 车音智能科技有限公司 一种图片加载方法及装置
CN108874674A (zh) * 2018-06-21 2018-11-23 北京金山安全软件有限公司 页面调试方法及装置
WO2019041766A1 (zh) * 2017-08-30 2019-03-07 深圳壹账通智能科技有限公司 页面资源加载方法、装置、终端设备及介质
CN109710870A (zh) * 2018-12-27 2019-05-03 北京微播视界科技有限公司 H5页面的加载方法、装置、电子设备及可读存储介质
CN110020320A (zh) * 2017-12-29 2019-07-16 北京京东尚科信息技术有限公司 缓存页面图片的方法和装置
CN110213600A (zh) * 2019-04-29 2019-09-06 网易（杭州）网络有限公司 视频直播方法、装置及设备
CN110263275A (zh) * 2019-06-14 2019-09-20 深圳前海桔子信息技术有限公司 一种访问网页的方法、装置、移动终端和存储介质
CN110688169A (zh) * 2019-09-16 2020-01-14 腾讯科技（深圳）有限公司 应用程序加速方法及装置、存储介质、电子设备
CN111159605A (zh) * 2019-12-31 2020-05-15 杭州云缔盟科技有限公司 解决拦截转发Android Webview的请求后页面加载变慢的方法

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070140595A1 (en) * 2005-12-16 2007-06-21 Bret Taylor Database assisted OCR for street scenes and other images
CN102111455A (zh) * 2011-03-11 2011-06-29 深圳市五巨科技有限公司 一种减少移动终端网络访问时间的方法及系统
CN103617165A (zh) * 2013-10-22 2014-03-05 小米科技有限责任公司 一种加载图片的方法、装置及终端
CN105487640A (zh) * 2015-12-15 2016-04-13 北京京东尚科信息技术有限公司 一种安卓手表预加载和缓存图片的方法
CN105760405A (zh) * 2014-12-19 2016-07-13 阿里巴巴集团控股有限公司 用于加载web页面的网络资源获取方法、缓存方法及装置
CN106095835A (zh) * 2016-05-31 2016-11-09 广东能龙教育股份有限公司 一种客户端图片四层缓存方法

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070140595A1 (en) * 2005-12-16 2007-06-21 Bret Taylor Database assisted OCR for street scenes and other images
CN102111455A (zh) * 2011-03-11 2011-06-29 深圳市五巨科技有限公司 一种减少移动终端网络访问时间的方法及系统
CN103617165A (zh) * 2013-10-22 2014-03-05 小米科技有限责任公司 一种加载图片的方法、装置及终端
CN105760405A (zh) * 2014-12-19 2016-07-13 阿里巴巴集团控股有限公司 用于加载web页面的网络资源获取方法、缓存方法及装置
CN105487640A (zh) * 2015-12-15 2016-04-13 北京京东尚科信息技术有限公司 一种安卓手表预加载和缓存图片的方法
CN106095835A (zh) * 2016-05-31 2016-11-09 广东能龙教育股份有限公司 一种客户端图片四层缓存方法

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2019041766A1 (zh) * 2017-08-30 2019-03-07 深圳壹账通智能科技有限公司 页面资源加载方法、装置、终端设备及介质
CN107911456A (zh) * 2017-11-17 2018-04-13 深圳泉眼体育运营管理有限公司 图片加载的流量优化方法、装置、终端设备及存储介质
CN110020320A (zh) * 2017-12-29 2019-07-16 北京京东尚科信息技术有限公司 缓存页面图片的方法和装置
CN108595235A (zh) * 2018-03-20 2018-09-28 车音智能科技有限公司 一种图片加载方法及装置
CN108874674A (zh) * 2018-06-21 2018-11-23 北京金山安全软件有限公司 页面调试方法及装置
CN109710870A (zh) * 2018-12-27 2019-05-03 北京微播视界科技有限公司 H5页面的加载方法、装置、电子设备及可读存储介质
CN110213600A (zh) * 2019-04-29 2019-09-06 网易（杭州）网络有限公司 视频直播方法、装置及设备
CN110263275A (zh) * 2019-06-14 2019-09-20 深圳前海桔子信息技术有限公司 一种访问网页的方法、装置、移动终端和存储介质
CN110263275B (zh) * 2019-06-14 2021-10-29 深圳桔子数字技术有限公司 一种访问网页的方法、装置、移动终端和存储介质
CN110688169A (zh) * 2019-09-16 2020-01-14 腾讯科技（深圳）有限公司 应用程序加速方法及装置、存储介质、电子设备
CN111159605A (zh) * 2019-12-31 2020-05-15 杭州云缔盟科技有限公司 解决拦截转发Android Webview的请求后页面加载变慢的方法

Similar Documents

Publication Publication Date Title
CN107291519A (zh) 一种基于移动终端的webview的跨平台图片缓存实现方法
US20210073058A1 (en) Message processing method and apparatus, storage medium, and computer device
US10817664B2 (en) Combined synchronous and asynchronous tag deployment
US10032291B2 (en) Methods and devices for interface display
US11409832B2 (en) Dynamic content modifications
US11249923B1 (en) Using shared memory to transport data between server processes
CN107168999A (zh) 一种页面更新方法及装置
US20190334872A1 (en) Advertisement interception method, terminal device and storage medium
US20130021361A1 (en) Method and device for rendering user interface font
US20150220496A1 (en) Dynamic sprite based theme switching
US11297393B2 (en) Selection interface with synchronized suggestion elements
CN104035804B (zh) 一种应用集成方法及装置
CN104796412B (zh) 端到端云服务系统及对其敏感数据的访问方法
CN106951323A (zh) 应用程序本地缓存方法和装置
US20200320041A1 (en) Multitenancy using an overlay file system
US10951486B2 (en) Terminal device, UI expansion method, and UI expansion program
US20150379677A1 (en) Radiation image inspection system and method based on b/s architecture
CN110213105A (zh) 一种跨平台微应用创建方法
CN113805973A (zh) 应用程序控制方法及装置、应用程序开发方法及装置
CN108897541A (zh) 应用程序的视觉还原方法、装置、存储介质及终端
CN109325192B (zh) 一种广告防屏蔽的方法和装置
CN113821307A (zh) 一种虚拟机镜像的快速导入方法、装置及设备
CN106547792B (zh) 一种图片分享方法及装置
CN108829392B (zh) 一种减少过渡绘制的方法、装置、电子设备及存储介质
JP2008210394A (ja) 制御用通信システム、および制御用通信プログラムを記録したコンピュータ読み取り可能な記録媒体

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20171024