CN107301182A - 一种展示内嵌图片的网页的方法和装置 - Google Patents

Abstract

本发明提供一种展示内嵌图片的网页的方法和装置，能提高网页图片的展示速度，减少加载图片所耗流量，解决加载时卡慢的问题，能全屏展示图片和快速另存图片。本发明的展示内嵌图片的网页的方法包括：通过网页加载控件向服务器发送网页加载请求；接收服务器返回的网页内容并通过网页加载控件加载网页，网页内容含图片的自定义的标签属性，自定义的标签属性的值为图片的网络存储地址，且图片的自定义的标签属性无法被页面加载控件所识别；通过客户端的应用程序接口向服务器发送图片的加载请求，并根据图片的自定义的标签属性获取图片，并将图片保存在本地；将网页内容中包含的图片的网络存储地址修改为图片的本地存储地址，以便在网页中展示图片。

Description

一种展示内嵌图片的网页的方法和装置

技术领域

本发明涉及计算机及其软件技术领域，特别地涉及一种展示内嵌图片的网页的方法和装置。

背景技术

在移动App中经常需要通过网页加载控件(例如安卓平台的WebView控件或iOS平台的UIWebView控件)来加载网页展示，这样可以实现兼容多个平台的网页展示，并且方便页面的更新，但采用此种方式往往跟在应用程序的客户端直接展示网页的方式在性能上差别很大，尤其是网页的图片展示上，需要针对网页图片进行比较大的优化来提高网页的性能。

客户端在加载网页时，可以在网页中增加缓存，例如通过HTTP协议实现缓存，这样缓存的内容是网页整体的内容，其中包含网页中的图片。具体地，客户端向服务器发出请求，以获知网页内容是否有更改，如果网页内容没有更改，则客户端将之前从服务器请求到的网页内容进行加载，这部分工作可由内嵌浏览器自动完成。

上述的网页加载方案加载性能较差，达不到用户的要求。由于受到网页加载控件的限制，在网页加载控件本身没有全屏的情况下，图片只能在网页加载控件的范围内展示，用户点击网页图片无法实现全屏展示图片，并且网页加载控件没有提供图片另存的功能，因此无法将该网页中的图片另存到本地。此外，现有方案由网页加载控件发起图片的下载，并且将图片缓存在网页的临时文件目录，这种在网页缓存的图片随时都有可能被清除，无法对下次的图片加载做到完美地缓存。

综上所述，现有的方案不能很好地解决快速、全屏展示网页图片以及将网页中的图片另存到本地等问题。

发明内容

有鉴于此，本发明提供一种展示内嵌图片的网页的方法和装置，能够提高网页图片的展示速度，解决用户在移动设备上浏览网页信息时加载过程中卡慢的问题，减少加载图片所耗的流量，并且能实现全屏展示图片和快速另存图片。

为实现上述目的，根据本发明的一个方面，提供了一种展示内嵌图片的网页的方法。

一种展示内嵌图片的网页的方法，包括：通过网页加载控件向服务器发送网页加载请求，所述网页中包含图片；接收服务器返回的网页内容并通过所述网页加载控件加载所述网页，所述网页内容包含所述图片的自定义的标签属性，所述自定义的标签属性的值为所述图片的网络存储地址，且所述图片的自定义的标签属性无法被所述页面加载控件所识别；通过客户端的应用程序接口向服务器发送所述图片的加载请求，并根据所述图片的自定义的标签属性获取所述图片，并将所述图片保存在本地；将所述网页内容中包含的所述图片的网络存储地址修改为所述图片的本地存储地址，以便所述网页加载控件从所述本地存储地址中获取所述图片并展示在所述网页中。

可选地，向服务器发送所述图片的加载请求之前，还包括：确认所述图片没有被缓存。

可选地，还包括：若所述图片已被缓存，则通过所述网页加载控件从本地缓存中加载并展示所述图片。

可选地，将所述图片保存在本地之后，还包括：记录所述图片的本地存储地址与所述网络存储地址的关联关系。

可选地，所述网页加载控件从所述本地存储地址中获取所述图片并展示在所述网页中之后，还包括：通过客户端的应用程序接口对所述图片进行全屏展示和缩放展示。

根据本发明的另一方面，提供了一种展示内嵌图片的网页的方法。

展示内嵌图片的网页的方法，包括：接收客户端的网页加载控件发来的网页加载请求，所述网页中包含图片；将所述网页中图片的标签属性修改为自定义的标签属性，以使所述自定义的标签属性无法被所述网页加载控件所识别；将修改后的所述网页返回客户端，以便所述网页加载控件加载所述网页；在接收到客户端的应用程序接口发来的图片加载请求时，将包含所述自定义的标签属性的图片返回客户端，以便所述客户端获取所述图片并通过所述网页加载控件加载到所述网页中进行展示。

可选地，所述客户端的图片加载请求中所请求的图片未被客户端缓存。

根据本发明的再一方面，提供了一种展示内嵌图片的网页的装置。

一种展示内嵌图片的网页的装置，所述装置位于客户端，该装置包括：网页请求模块，用于通过网页加载控件向服务器发送网页加载请求，所述网页中包含图片；网页加载模块，用于接收服务器返回的网页内容并通过所述网页加载控件加载所述网页，所述网页内容包含所述图片的自定义的标签属性，所述自定义的标签属性的值为所述图片的网络存储地址，且所述图片的自定义的标签属性无法被所述页面加载控件所识别；图片请求模块，用于通过客户端的应用程序接口向服务器发送所述图片的加载请求，并根据所述图片的自定义的标签属性获取所述图片，并将所述图片保存在本地；图片展示模块，用于将所述网页内容中包含的所述图片的网络存储地址修改为所述图片的本地存储地址，以便所述网页加载控件从所述本地存储地址中获取所述图片并展示在所述网页中。

可选地，所述图片请求模块还用于：确认所述图片没有被缓存。

可选地，所述图片展示模块还用于：若所述图片已被缓存，则通过所述网页加载控件从本地缓存中加载并展示所述图片。

可选地，还包括：图片保存模块，用于记录所述图片的本地存储地址与所述网络存储地址的关联关系。

可选地，所述图片展示模块还用于：通过客户端的应用程序接口对所述图片进行全屏展示和缩放展示。

根据本发明的再一方面，提供了一种展示内嵌图片的网页的装置。

一种展示内嵌图片的网页的装置，所述装置位于服务器端，该装置包括：请求接收模块，用于接收客户端的网页加载控件发来的网页加载请求，所述网页中包含图片；属性修改模块，用于将所述网页中图片的标签属性修改为自定义的标签属性，以使所述自定义的标签属性无法被所述网页加载控件所识别；网页返回模块，用于将修改后的所述网页返回客户端，以便所述网页加载控件加载所述网页；图片返回模块，用于在接收到客户端的应用程序接口发来的图片加载请求时，将包含所述自定义的标签属性的图片返回客户端，以便所述客户端通过所述网页加载控件获取所述图片并加载到所述网页中进行展示。

可选地，所述客户端的图片加载请求中所请求的图片未被客户端缓存。

根据本发明的技术方案，通过网页加载控件向服务器发送网页加载请求，且网页中包含图片，然后通过网页加载控件加载服务器返回的网页内容，该网页内容包含页面加载控件无法识别的图片的自定义的标签属性，通过客户端的应用程序接口向服务器发送图片加载请求，并根据图片的自定义的标签属性获取图片，其中，在向服务器发送图片加载请求之前，如果该图片已被缓存，则从缓存中获取图片，最后通过网页加载控件将获取的图片加载到网页中进行展示。根据本发明的技术方案，使得在本地保存有图片的情况下，无需再通过网络下载图片，减少图片流量，且图片加载不受网页加载控件的限制，页面再次打开或页面刷新时，加载本地保存的图片即可，提高图片展示速度，解决用户在移动设备上浏览网页信息时加载过程中卡慢的问题，下载的图片可快速另存在本地，通过调用客户端自身的应用程序接口即可实现图片全屏展示。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的展示内嵌图片的网页的方法的主要步骤示意图；

图2是根据本发明实施例的另一种展示内嵌图片的网页的方法的主要步骤示意图；

图3是根据本发明实施例的客户端与服务器交互的主要步骤示意图；

图4是根据本发明实施例的展示内嵌图片的网页的装置的主要模块示意图；

图5是根据本发明实施例的另一种展示内嵌图片的网页的装置的主要模块示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本发明实施例的展示内嵌图片的网页的方法的主要步骤示意图。

如图1所示，本发明实施例的展示内嵌图片的网页的方法的主要步骤包括步骤S101至步骤S104。

步骤S101：通过网页加载控件向服务器发送网页加载请求，其中，该请求加载的网页中包含图片。

步骤S102：接收服务器返回的网页内容并通过网页加载控件加载网页，网页内容包含图片的自定义的标签属性，自定义的标签属性的值为图片的网络存储地址，且图片的自定义的标签属性无法被页面加载控件所识别。

步骤S103：通过客户端的应用程序接口向服务器发送图片的加载请求，并根据图片的自定义的标签属性获取图片，并将图片保存在本地。

在向服务器发送图片的加载请求之前，还需要确认该图片没有被缓存，可通过判断该图片是否已被缓存或者缓存是否已过期等来实现。若该图片已被缓存，则客户端可以通过网页加载控件从本地缓存中加载并展示图片。

将图片保存在本地之后，还可以记录该图片的本地存储地址与图片的网络存储地址的关联关系。

步骤S104：将网页内容中包含的图片的网络存储地址修改为图片的本地存储地址，以便网页加载控件从本地存储地址中获取图片并展示在网页中。

网页加载控件从本地存储地址中获取图片并展示在网页中之后，还可以通过客户端的应用程序接口对图片进行全屏展示和缩放展示。

图2是根据本发明实施例的另一种展示内嵌图片的网页的方法的主要步骤示意图。

如图2所示，本发明实施例的另一种展示内嵌图片的网页的方法主要包括如下步骤S201至步骤S204。

步骤S201：接收客户端的网页加载控件发来的网页加载请求，该请求加载的网页中包含图片。

步骤S202：将网页中图片的标签属性修改为自定义的标签属性，以使自定义的标签属性无法被网页加载控件所识别。

步骤S203：将修改后的网页返回客户端，以便网页加载控件加载该网页。

步骤S204：在接收到客户端的应用程序接口发来的图片加载请求时，将包含自定义的标签属性的图片返回客户端，以便客户端获取该图片并通过网页加载控件加载到网页中进行展示。

其中，客户端的图片加载请求中所请求的图片未被客户端缓存。

图3是根据本发明实施例的客户端与服务器交互的主要步骤示意图。

客户端与服务器的交互主要是客户端向服务器请求网页内容和图片，以及服务器向客户端返回所请求的网页内容和图片。客户端可以为安装在手机、平板电脑等移动设备上的应用程序(App)。如图3所示，客户端与服务器交互的主要步骤包括步骤S301至步骤S312。

步骤S301：客户端通过网页加载控件向服务器发送网页加载请求。

步骤S302：服务器接收该网页加载请求，将所请求的网页中的图片的标签属性修改为自定义的标签属性，然后将网页内容返回客户端。

其中，在服务器将网页内容返回客户端之前，首先修改网页中图片的标签属性，主要是修改该网页的HTML代码中的图片标签(IMG标签)中的源属性(SRC属性)，即将源属性的属性值另存为一个自定义属性之中，这一过程也可以称为对图片标签源属性的格式化。图片标签中源属性的属性值通常是图片的网络存储地址，不同图片的图片标签不同，网络存储地址也不相同。网页规范中规定网页加载控件可以从图片标签中的源属性获取图片地址并自动加载图片。本实施例中，将源属性的属性值另存为一个自定义属性，可以使得网页加载控件无法识别该自定义属性，从而无法自动从该自定义属性中获取到图片地址来加载图片。因此，本发明实施例的客户端可以对传统的利用网页加载控件自动加载图片的方式进行拦截，摆脱了网页加载控件对图片加载的限制。

步骤S303：客户端通过网页加载控件加载从服务器返回的网页内容，并监听网页内容是否加载完毕，在网页内容加载完毕之后，准备进行图片的加载操作。

其中，根据本发明实施例的技术方案，客户端通过网页加载控件加载从服务器返回的网页内容时，与现有的网页加载方式不同的是，本发明实施例在加载网页时并不加载网页中的图片，而是将网页内容和网页中的图片分开加载。其中，网页可以是html页面，网页内容包括网页中的文字、标签属性等。由于步骤S302已经详述了本发明实施例的技术方案中，在加载网页内容时，对网页加载控件自动加载图片进行拦截的具体过程，此处不再赘述。

步骤S304：客户端判断准备加载的图片是否已被本地缓存，如果是，则进行步骤S308；如果否，则进行步骤S305。

其中，如果客户端本地缓存有准备加载的图片，还可以给该本地缓存的图片设置缓存周期，缓存周期的具体数值可以根据业务需要来设定。如果本地缓存有该图片且图片的缓存周期未过期，只需从本地缓存加载该图片即可。如果客户端本地未缓存该准备加载的图片，或者所缓存的图片已过了缓存周期，才需要向服务器请求下载图片。这样可以加速图片的展示速度，也节省了下载图片所需的流量。

步骤S305：客户端通过自身的应用程序接口向服务器发送图片的加载请求。

步骤S306：服务器接收客户端的图片加载请求，并将保存在网络存储地址的图片发送到客户端。

其中，该网络存储地址可以为图片在服务器端的存储地址，网页中有时有多个图片需要加载，客户端可以请求并发下载图片，然后服务器将多个图片以队列的形式返回客户端。

步骤S307：客户端将从服务器获取的图片缓存到本地，记录图片的本地存储地址，以及记录图片的本地存储地址与图片的网络存储地址之间的关联关系。

其中，客户端在本地缓存图片之后，还记录图片的本地存储地址与图片的网络存储地址之间的关联关系，以便客户端可以根据检查本地缓存中是否记录有该关联关系来判断准备加载的图片是否被缓存。如果本地保存了该关联关系，则说明本地缓存中存在与图片的网络存储地址相对应的本地存储地址，那么本地缓存中就已经缓存有该图片。

客户端将从服务器获取的图片保存在本地缓存，使得在打开页面或进行页面刷新等需要加载图片的情况下，可以直接从本地缓存中加载，无需再向服务器请求图片，实现了快速地加载图片。此外，由于网页中的图片可以保存在移动设备本地，例如另存到手机相册，使得多个应用程序(App)可以共享网页中的图片，例如阅读App和微信都可以使用保存在手机相册中的网页图片，克服了现有方案无法实现网页图片由多个App共享的缺陷。

步骤S308：客户端通过网页加载控件将图片的自定义的标签属性的值设置为图片的本地存储地址，然后网页加载控件从本地存储地址获取图片并加载到网页中进行展示。

由于服务器对网页中图片的标签属性进行了修改，使得网页加载控件无法按照传统的方式自动识别图片标签属性并加载图片，因此，本发明的实施例可以通过客户端原生的加载方式来加载图片以便可以对图片进行另存、全屏展示或者缩放展示等操作，即，客户端调用网页加载控件的JavaScript接口，例如可以向网页加载控件的addJavascriptInterface方法注入JavaScript代码，以便将网页中图片的自定义的标签属性设置为图片的本地存储地址，也就是说，将网页中图片的网络存储地址修改为图片的本地存储地址，然后网页加载控件从本地存储地址获取图片并加载到网页中进行展示。从而避免由网页加载控件来自动加载图片，而可由客户端来进行图片加载。

步骤S309：客户端监控网页中展示的图片是否发生点击事件，如果是，则执行步骤S310；否则继续执行该点击事件监控操作。

步骤S310：客户端全屏展示被点击的图片。

本发明实施例可以实现在点击图片时对图片全屏展示。其中，客户端可以通过调用自身的应用程序接口来全屏展示该图片。

步骤S311：客户端监控全屏展示的图片是否发生缩放事件，如果是，则进行步骤S312；否则继续执行该缩放事件监控操作。

步骤S312：客户端对全屏展示的图片进行缩放，然后结束流程。

对图片的缩放可以是双指缩放，客户端可以调用自身的应用程序接口来缩放该图片。

图4是根据本发明实施例的展示内嵌图片的网页的装置的主要模块示意图。

该装置位于客户端。如图4所示，本发明实施例的展示内嵌图片的网页的装置400主要包括：网页请求模块401、网页加载模块402、图片请求模块403以及图片展示模块404。

其中，网页请求模块401用于通过网页加载控件向服务器发送网页加载请求，该网页中包含图片；网页加载模块402用于接收服务器返回的网页内容并通过网页加载控件加载该网页，其中，网页内容包含图片的自定义的标签属性，自定义的标签属性的值为图片的网络存储地址，且图片的自定义的标签属性无法被页面加载控件所识别；图片请求模块403用于通过客户端的应用程序接口向服务器发送图片的加载请求，并根据图片的自定义的标签属性获取图片，并将图片保存在本地；图片展示模块404用于将网页内容中包含的图片的网络存储地址修改为图片的本地存储地址，以便网页加载控件从本地存储地址中获取图片并展示在网页中。

其中，图片请求模块还可以用于确认图片没有被缓存。

图片展示模块还可以用于：若图片已被缓存，则通过网页加载控件从本地缓存中加载并展示该图片。

图片展示模块还可以用于通过客户端的应用程序接口对图片进行全屏展示和缩放展示。

本实施例的展示内嵌图片的网页的装置400还可以包括图片保存模块，该图片保存模块可以用于记录图片的本地存储地址与图片的网络存储地址的关联关系。

图5是根据本发明实施例的另一种展示内嵌图片的网页的装置的主要模块示意图。

该装置位于服务器端。图5如图5所示，本发明实施例的另一种展示内嵌图片的网页的装置500主要包括：请求接收模块501、属性修改模块502、网页返回模块503以及图片返回模块504。

其中，请求接收模块501用于接收客户端的网页加载控件发来的网页加载请求，该网页中包含图片；属性修改模块502用于将网页中图片的标签属性修改为自定义的标签属性，以使自定义的标签属性无法被网页加载控件所识别；网页返回模块503用于将修改后的网页返回客户端，以便网页加载控件加载该网页；图片返回模块504用于在接收到客户端的应用程序接口发来的图片加载请求时，将包含自定义的标签属性的图片返回客户端，以便客户端通过网页加载控件获取图片并加载到网页中进行展示。

其中，客户端的图片加载请求中所请求的图片未被客户端缓存。

根据本发明实施例的技术方案，通过网页加载控件向服务器发送网页加载请求，且网页中包含图片，然后通过网页加载控件加载服务器返回的网页内容，该网页内容包含页面加载控件无法识别的图片的自定义的标签属性，通过客户端的应用程序接口向服务器发送图片加载请求，并根据图片的自定义的标签属性获取图片，其中，在向服务器发送图片加载请求之前，如果该图片已被缓存，则从缓存中获取图片，最后通过网页加载控件将获取的图片加载到网页中进行展示。根据本发明的技术方案，使得在本地保存有图片的情况下，无需再通过网络下载图片，减少图片流量，且图片加载不受网页加载控件的限制，页面再次打开或页面刷新时，加载本地保存的图片即可，提高图片展示速度，解决用户在移动设备上浏览网页信息时加载过程中卡慢的问题，下载的图片可快速另存在本地，通过调用客户端自身的应用程序接口即可实现图片全屏展示。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (14)

1.一种展示内嵌图片的网页的方法，其特征在于，包括：

通过网页加载控件向服务器发送网页加载请求，所述网页中包含图片；

接收服务器返回的网页内容并通过所述网页加载控件加载所述网页，所述网页内容包含所述图片的自定义的标签属性，所述自定义的标签属性的值为所述图片的网络存储地址，且所述图片的自定义的标签属性无法被所述页面加载控件所识别；

通过客户端的应用程序接口向服务器发送所述图片的加载请求，并根据所述图片的自定义的标签属性获取所述图片，并将所述图片保存在本地；

将所述网页内容中包含的所述图片的网络存储地址修改为所述图片的本地存储地址，以便所述网页加载控件从所述本地存储地址中获取所述图片并展示在所述网页中。

2.根据权利要求1所述的方法，其特征在于，向服务器发送所述图片的加载请求之前，还包括：

确认所述图片没有被缓存。

3.根据权利要求2所述的方法，其特征在于，还包括：若所述图片已被缓存，则通过所述网页加载控件从本地缓存中加载并展示所述图片。

4.根据权利要求1所述的方法，其特征在于，将所述图片保存在本地之后，还包括：

记录所述图片的本地存储地址与所述网络存储地址的关联关系。

5.根据权利要求1所述的方法，其特征在于，所述网页加载控件从所述本地存储地址中获取所述图片并展示在所述网页中之后，还包括：

通过客户端的应用程序接口对所述图片进行全屏展示和缩放展示。

6.一种展示内嵌图片的网页的方法，其特征在于，包括：

接收客户端的网页加载控件发来的网页加载请求，所述网页中包含图片；

将所述网页中图片的标签属性修改为自定义的标签属性，以使所述自定义的标签属性无法被所述网页加载控件所识别；

将修改后的所述网页返回客户端，以便所述网页加载控件加载所述网页；

在接收到客户端的应用程序接口发来的图片加载请求时，将包含所述自定义的标签属性的图片返回客户端，以便所述客户端获取所述图片并通过所述网页加载控件加载到所述网页中进行展示。

7.根据权利要求6所述的方法，其特征在于，所述客户端的图片加载请求中所请求的图片未被客户端缓存。

8.一种展示内嵌图片的网页的装置，所述装置位于客户端，其特征在于，该装置包括：

网页请求模块，用于通过网页加载控件向服务器发送网页加载请求，所述网页中包含图片；

网页加载模块，用于接收服务器返回的网页内容并通过所述网页加载控件加载所述网页，所述网页内容包含所述图片的自定义的标签属性，所述自定义的标签属性的值为所述图片的网络存储地址，且所述图片的自定义的标签属性无法被所述页面加载控件所识别；

图片请求模块，用于通过客户端的应用程序接口向服务器发送所述图片的加载请求，并根据所述图片的自定义的标签属性获取所述图片，并将所述图片保存在本地；

图片展示模块，用于将所述网页内容中包含的所述图片的网络存储地址修改为所述图片的本地存储地址，以便所述网页加载控件从所述本地存储地址中获取所述图片并展示在所述网页中。

9.根据权利要求8所述的装置，其特征在于，所述图片请求模块还用于：

确认所述图片没有被缓存。

10.根据权利要求9所述的装置，其特征在于，所述图片展示模块还用于：

若所述图片已被缓存，则通过所述网页加载控件从本地缓存中加载并展示所述图片。

11.根据权利要求8所述的装置，其特征在于，还包括：图片保存模块，用于记录所述图片的本地存储地址与所述网络存储地址的关联关系。

12.根据权利要求8所述的装置，其特征在于，所述图片展示模块还用于：

通过客户端的应用程序接口对所述图片进行全屏展示和缩放展示。

13.一种展示内嵌图片的网页的装置，所述装置位于服务器端，其特征在于，该装置包括：

请求接收模块，用于接收客户端的网页加载控件发来的网页加载请求，所述网页中包含图片；

属性修改模块，用于将所述网页中图片的标签属性修改为自定义的标签属性，以使所述自定义的标签属性无法被所述网页加载控件所识别；

网页返回模块，用于将修改后的所述网页返回客户端，以便所述网页加载控件加载所述网页；

图片返回模块，用于在接收到客户端的应用程序接口发来的图片加载请求时，将包含所述自定义的标签属性的图片返回客户端，以便所述客户端通过所述网页加载控件获取所述图片并加载到所述网页中进行展示。

14.根据权利要求13所述的装置，其特征在于，所述客户端的图片加载请求中所请求的图片未被客户端缓存。